Tengo ReactSelect global con estilo predeterminado. Necesito anular solo una de las propiedades del estilo. Considere lo siguiente como el componente CustomReactSelect reutilizable.
custom-react-select.tsx export const CustomReactSelect = (props) => { const defaultStyle = { control: (provided, state) => ({ ... backgroundColor: (state.isDisabled) ? '--theia-editorGroupHeader-tabsBackground' : 'var(--theia-input-background)', fontSize: 'var(--theia-ui-font-size1)', ... }), } ... return <Select ... styles = {...defaultStyle,...props.style} ... /> }Considere una situación en la que solo necesito anular el fondo del estilo de control de manera similar.
const overrideControlStyle = { backgroundColor: (state.isFocused) ? 'red' : 'black' }Solo necesito anular el color de fondo, al final, los accesorios que deben enviarse a React Select deben ser los siguientes:
Sent Props... { control: (provided, state) => ({ ... backgroundColor: (state.isFocused) ? 'red' : 'black', fontSize: 'var(--theia-ui-font-size1)', ... }), }Estás en el camino correcto. provided son los estilos predeterminados actuales para el componente particular de la selección, por lo que sus estilos deben fusionarse con ellos.
(provided, state) => ({ ...provided, backgroundColor: 'black', ...(state.isFocused && { backgroundColor: 'red' }), ...(state.isDisabled && { backgroundColor: 'var(--theia-editorGroupHeader-tabsBackground)' }) }) Así que considere su orden de importancia con sus anulaciones. cualquiera que sea el condicional que definas en último lugar, ganará. Si el control está enfocado, entonces backgroundColor será rojo, sin embargo, isDisabled es más importante isFocused , por lo que definirlo en último lugar usará la variable en su lugar.
Es posible que esto no sea exacto para su caso de uso, pero con suerte lo pondrá en el camino correcto.