Quiero cambiar la propiedad de ancho css de mi elemento en alguna condición
<div className="consoleLayoutRoot-sideMenu"> <ConsoleSideMenu /> </div>CSS
.consoleLayoutRoot-sideMenu .ant-menu { padding-top: 30px; /* background-color: #191146 !important; */ }Estoy haciendo de esta manera... pero no pasa nada.
document.getElementsByClassName("conjnjnot-sideMenjnjbhbhu.annjn ").style.width = "77px";Eso no funciona porque está tratando una lista como si fuera un elemento . Pero tampoco es fundamentalmente cómo harías esto en un proyecto de React.
En cambio, haría que el componente se volviera a renderizar cuando la condición se vuelva verdadera (quizás configurando un miembro de estado). Al representar el div , opcionalmente incluye un style o un nombre de clase dependiendo de si desea que se aplique el ancho:
<div className={`consoleLayoutRoot-sideMenu ${shouldHaveWidthClass ? "width-class" : ""}`}> <ConsoleSideMenu /> </div> ... donde .width-class { width: 50px; } está en su hoja de estilo.
O con estilo en línea, pero es mejor evitar los estilos en línea:
<div className="consoleLayoutRoot-sideMenu" style={shouldHaveWidthSetting ? { width: "50px" } : undefined}> <ConsoleSideMenu /> </div>Aquí hay un ejemplo (usando una clase);
const {useState} = React; const ConsoleSideMenu = () => <span>x</span>; const Example = () => { const [includeWidth, setIncludeWidth] = useState(false); const toggle = ({currentTarget: { checked }}) => { setIncludeWidth(checked); }; return <React.Fragment> <div className={`consoleLayoutRoot-sideMenu ${includeWidth ? "width-class" : ""}`}> <ConsoleSideMenu /> </div> <label> <input type="checkbox" onChange={toggle} checked={includeWidth} /> Include width class </label> </React.Fragment>; }; ReactDOM.render(<Example />, document.getElementById("root")); .width-class { width: 50px; } .consoleLayoutRoot-sideMenu { border: 1px solid blue; } <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>