Quiero agregar la propiedad css si el valor es verdadero. Ejemplo ->
menuList: (styles, { selectProps }) => ({ ...styles, padding: 0, borderRadius: 3, maxHeight: selectProps.setShortHeightDropDown && "120px" }),Y esto es trabajo. También estoy tratando con
menuList: (styles, { selectProps }) => ({ ...styles, padding: 0, borderRadius: 3, maxHeight: selectProps.setShortHeightDropDown ? "120px" : " }),Pero en cada momento se establece la propiedad maxHeight.
Lo que necesito ?
Si selectProps.setShortHeightDropDown === verdadero establecer maxHeigh
Si selectProps.setShortHeightDropDown === false no se establece maxHeigh
lo que estoy tratando
menuList: (styles, { selectProps }) => ({ ...styles, padding: 0, borderRadius: 3, selectProps.setShortHeightDropDown ? maxHeight: selectProps.setShortHeightDropDown "120px" : ' }),Pero esto no se puede escribir.
Puede crear otro objeto.
const dynamicStyles = {}; if(selectProps.setShortHeightDropDown) { dynamicStyles.maxHeight = "120px"; } // maybe some more if statements for some other dynamic propsLuego agréguelo al objeto original:
menuList: (styles, { selectProps }) => ({ ...styles, padding: 0, borderRadius: 3, ...dynamicStyles }),Recomiendo poner las propiedades CSS condicionales en una clase y luego agregar/eliminar esta clase del elemento de destino según su valor:
p.ej
styles.css (o donde sea que estén tus estilos)
.dynamic-styles { // Styles go here }app.js (o donde sea que esté su componente)
import './styles.css'; // Don't forget to import your stylesheet function YourComponent(props) { ... const value = // Compute from props, state or otherwise ... return ( <div className={`basic-class ${value ? 'dynamic-styles' : ''}`.trim()}> ... </div> ); } En escenarios más complejos donde tiene múltiples clases dinámicas diferentes, puede abstraer esto en un valor memorizado usando useMemo y una classList ( DOMTokenList ):
... const className = useMemo(() => { const classList = new DOMTokenList(); classList.add('basic-class'); if (value === 'value-a') classList.add('dynamic-class-a') else if (value === 'value-a') classList.add('dynamic-class-b') return classList.toString(); }, [value]); return ( <div className={className}> ... El uso de useMemo aquí garantiza que className solo se calcule cuando cambien los valores dependientes. Lea más sobre esto en los documentos de React .