const dark = { backgroundColor: "#2c3343", color: "#c8e5c9" }; const light = { backgroundColor: "white", color: "black" }; return ( <> <div className="my-5 container"> <h1>{props.heading}</h1> <div className="mb-3"> <textarea className="form-control" id="myBox" value={text} rows={8} onChange={handleOnChange} style={{ backgroundColor: props.mode.backgroundColor, color: props.mode.color, }} > asd </textarea> </div> </div> </> );básicamente estoy pasando el modo en accesorios en este archivo js. El modo es una cadena que es 'clara' u 'oscura'. Sobre la base del valor props.mode, quiero cambiar el color de mi cuadro de texto. Pero el estilo css no está sucediendo en él. ¿Qué hacer? ¿Estoy haciendo algo mal al llamar a los objetos? Como quiero que funcione de esta manera: -
(el modo de consideración es == 'oscuro')
style = {{ backgroundColor: dark.backgroundColor, color: dark.color, }}el modo de consideración es 'ligero'
style = {{ backgroundColor: light.backgroundColor, color: light.color, }}También los objetos claros y oscuros que he hecho dan aviso de que no los he usado. Sé que puedo usar operadores ternarios en lugar de crear dos objetos separados y llamar a sus valores, pero quiero hacerlo de esta manera. Por lo tanto, agradecería si alguien puede señalar el problema. Aquí está parte de mi código: -
const dark = { backgroundColor: "#2c3343", color: "#c8e5c9", }; const light = { backgroundColor: "white", color: "black", }; return ( <> <div className="my-5 container"> <h1>{props.heading}</h1> <div className="mb-3"> <textarea className="form-control" id="myBox" value={text} rows={8} onChange={handleOnChange} style={{ backgroundColor: props.mode.backgroundColor, color: props.mode.color, }}Puede acceder dinámicamente a valores en un objeto con la sintaxis de corchetes.
const modes = { light: {...}, dark: {...}, }; const thisMode = modes[props.mode]; // now use it like color: thisMode.colorDebe usar CSS dinámicamente, así que actualicé su código, debería funcionar para usted.
const customColor = { dark: { backgroundColor: "#2c3343", color: "#c8e5c9", }, light: { backgroundColor: "white", color: "black", } } return ( <> <div className="my-5 container"> <h1>{props.heading}</h1> <div className="mb-3"> <textarea className="form-control" id="myBox" value={text} rows={8} onChange={handleOnChange} style={customColor[props.mode]} /> </div> </div> </>)O puede hacerlo de la manera mencionada en @windowsill o hacerlo de la siguiente manera.
style={ props.mode === "light" ? { backgroundColor: light.backgroundColor, color: light.color, } : { backgroundColor: dark.backgroundColor, color: dark.color, } }