Existem várias estratégias para mudar cores de algum elemento com react mas, a sua não foi a melhor escolha, porque, está misturando comandos, componentes em react precisam ter estados globais ou locais para mudanças, um exemplo básico para mudanças de uma div
fazendo toggle
(true or false) e mudando a cor:
1 ) Com estado a forma natural do React
function App() {
const [toogle, setToogle] = React.useState(true);
const [cor, setCor] = React.useState('#c3c3c3');
React.useEffect(() => {
setCor((state) => toogle ? '#c3c3c3': '#446677');
}, [toogle]);
return (
<div>
<button
onClick={e =>
setToogle(state => !state)}
>Alterar</button>
<br /><br />
<div style={{
height: '200px',
width: '200px',
backgroundColor:cor,
}}>
</div>
</div>
)
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>
onde o estado vai controlar as duas cores que foram estipulados nesse código.
2 ) Referencia do elemento:
Por referencia da div também podemos mudar cores de qualquer elemento de tela, exemplo:
function App() {
const refDiv = React.useRef()
const [toogle, setToogle] = React.useState(true);
React.useEffect(() => {
if (refDiv.current) {
refDiv.current.style.backgroundColor = '#c3c3c3';
refDiv.current.style.height = '200px';
refDiv.current.style.width = '200px'
}
}, []);
React.useEffect(() => {
if (refDiv.current) {
if (toogle) {
refDiv.current.style.backgroundColor = '#c3c3c3';
} else {
refDiv.current.style.backgroundColor = '#446677';
}
}
}, [toogle]);
return (
<div>
<button
onClick={e =>
setToogle(state => !state)}
>Alterar</button>
<br /><br />
<div ref={refDiv}>
</div>
</div>
)
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>
é uma forma não usual, particularmente não usuária, mas, essa forma encontrada para acessar a <div>
por referencia, algum eventos até são legais para usar por exemplo colocar focus()
em elementos <input />
, então a primeira opção é excelente e não lhe causa problemas futuros.
3 ) Com styled components: site
Sendo essa forma muito utilizado para estilizar componentes do react de forma dinâmica por propriedades é alterado o elemento:
const DivColor = window.styled.div`
background: ${({toggle}) => toggle ? '#c3c3c3': '#446677'};
height: 200px;
width: 200px;
`;
function App() {
const [toggle, setToggle] = React.useState(true);
return (
<div>
<button
onClick={e =>
setToggle(state => !state)}
>Alterar</button>
<br /><br />
<DivColor toggle={toggle}></DivColor>
</div>
)
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script><script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root">Carregando ...</div>
As 3 formas funcionam, a 1 e a 3 são as mais recomendadas por trabalharem com estado e comandos do React
a 2 são mais para eventos ou algo em especifico, mas, como dito não muito usado para estilização.