Tengo la interfaz de usuario semántica React importada de la siguiente manera
import { Form } from 'semantic-ui-react'Ahora, estoy usando su componente de selección de la siguiente manera:
<Form> <Form.Group widths="equal"> <Form.Select //I wish to change the background color of only the selected item placeholder={"Choose Item"} value={selectedItem} className={classes.select} onChange={handleItemSelectionChange} options={ items.map((e) => { return ( { key: e['name'], value: e['name'], text: e['name'] } ) }) } > </Form.Select> </Form.Group> </Form>¿Cómo puedo cambiar el color de fondo y el color del icono solo del elemento seleccionado en el componente Form.Select ?
Gracias.
No vi ninguna opción integrada en su API, pero puede lograr esto usando css, el div principal de la opción seleccionada tiene una clase de 'selección' de forma predeterminada, y la opción div tiene una clase de 'divisor' por predeterminado, por lo que puede agregar algo como esto en su css:
.selection.dropdown > .divider { background-color: red; } .selection.dropdown > .divider:before { content: ""; display: block; background: url("icon.jpg") no-repeat; width: 20px; height: 20px; float: left; margin: 0 6px 0 0; }también debe consultar el componente desplegable react.semantic-ui que tiene más opciones que el componente de selección que es solo un envoltorio a su alrededor.