Hice una selección personalizada usando react-select y la diseñé con componentes con estilo. Pude diseñar todo (control, menú, opción, marcador de posición) usando los selectores y cambiar las cosas dinámicamente a través de accesorios. También debería poder apuntar al campo singleValue de acuerdo con los documentos, pero no funcionará. Quiero poder controlar el color del texto dinámicamente. Tan pronto como selecciono una opción, el texto cambia a negro y eso es todo. Entonces, si estoy en modo oscuro, no puedo ver el texto. Intenté apuntar a diferentes campos para ver si eso funcionaba, pero no.
import styled from 'styled-components'; import ReactSelect from 'react-select'; export const CustomSelect = styled(ReactSelect)` width: 30rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); border-radius: 0.5rem; & .Select__control { height: 6rem; border: none; font-family: 'Nunito Sans'; font-size: 1.5rem; font-weight: 600; background-color: ${(props) => props.isDark ? 'hsl(209, 23%, 22%)' : 'hsl(0, 0%, 100%)'}; } & .Select__option { font-size: 1.5rem; font-weight: 600; color: ${props => props.isDark? 'hsl(0, 0%, 100%)': 'hsl(200, 15%, 8%)'}; &:hover{ background-color: grey; } } & .Select__menu { font-family: 'Nunito Sans'; background-color: ${(props) => props.isDark ? 'hsl(209, 23%, 22%)' : 'hsl(0, 0%, 100%)'}; } & .Select__placeholder { font-size: 1.5rem; color: ${props => props.isDark? 'hsl(0, 0%, 100%)': 'hsl(200, 15%, 8%)'}; } & .Select__inputValue { color: ${props => props.isDark? 'hsl(0, 0%, 100%)': 'hsl(200, 15%, 8%)'}; } & .Select__ValueContainer { color: ${props => props.isDark? 'hsl(0, 0%, 100%)': 'hsl(200, 15%, 8%)'}; } & .Select__singleValue { font-size: 5rem; color: ${props => props.isDark? 'hsl(0, 0%, 100%)': 'hsl(200, 15%, 8%)'}; } `;Puedo usar estilos personalizados como se muestra para apuntar al singleValue de esa manera, pero luego no puedo usar mis accesorios para hacerlo dinámico, así que tuve que elegir un color de texto que funcionara para ambos. Definitivamente no es ideal. Parece una locura que todo funcione tan fácilmente excepto este campo. ¿Hay algo que me estoy perdiendo aquí?
import { CustomSelect } from './filter-dropdown.styles'; const Filters = ({ isDark, options }) => { const customStyles = { singleValue: (provided, state) => ({ ...provided, color: 'grey', }) } return ( <CustomSelect classNamePrefix={'Select'} isDark={isDark} options={options} placeholder="Filter by region..." styles={customStyles} /> ); }; export default Filters;Actualización: me equivoqué al no poder pasar accesorios a los estilos personalizados. Debo haberlo perdido en los documentos. Todavía no puedo diseñar el singleValue usando el selector, pero puedo establecer un condicional en un accesorio diferente y establecer el valor del color de esa manera. Espero que esto le ahorre tiempo a alguien.
import { CustomSelect } from './filter-dropdown.styles'; const Filters = ({ isDark, options }) => { const customStyles = { singleValue: (provided, state) => ({ ...provided, color: state.selectProps.changeInput, }) } return ( <CustomSelect classNamePrefix={'Select'} isDark={isDark} options={options} placeholder="Filter by region..." changeInput={isDark? 'hsl(0, 0%, 100%)' : 'hsl(200, 15%, 8%)'} styles={customStyles} /> ); }; export default Filters;Para el caso de hacer un estilo dinámico en componentes con estilo, recomendaría usar el Proveedor de temas de la biblioteca de componentes con estilo y pasarle el tema seleccionado así:
<ThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}> </ThemeProvider>la variable del tema podría estar en estado en redux o en contexto, el objeto del tema debe contener los atributos del tema y puede usarlo así en el componente de reacción:
const Example = styled.div` background-image: url(${({ theme }) => theme.backgroundImage}); `;