Quando uso ClassName em um styled-components, ele não aplica os estilos configurados. Mas se uso o ClassName em umcomponent filho, então funciona. Em ambos os caso, o html gerado possui a class normalmente
no código abaixo, a pagina não redenriza a classe
import styled from 'styled-components'
const Div = styled.div`
font-size:45px;
.App{
background-color:red
}`
function App() {
return (
<Div className="App">
Ola Mundo
</Div>
);
}
export default App;
Mas ainda assim, a classe é colocada no html, quando inspeciono a pagina:
<div id="root"><div class="sc-bdvvtL cJMkxy App">Ola Mundo</div></div>
Isso não acontece, se uso a ClassName e um component filho:
function App() {
return (
<Div>
<div className="App">
Ola Mundo
</div>
</Div>
);
}
pagina :
<div id="root"><div class="sc-bdvvtL cJMkxy"><div class="App">Ola Mundo</div></div></div>