A pergunta é se você está repassando as props
corretamente para o componente Banner
?, com tudo isso eu resolvi exemplificar assim o componente Banner
tem o seguinte código:
function Banner({children, titletitulo, className}) {
return (
<div className={className}>{children}</div>
)
}
nesse componente eu repasso as informações de suas propriedades para utilizar as classes css
como de exemplo, pronto, isso já vai funcionar, quando se cria componentes e o mesmo tem propriedades, precisa ser repassado se não realmente não vai funcionar.
Exemplo final:
function Banner({children, titletitulo, className}) {
return (
<div className={className}>{children}</div>
)
}
function AutoAtendimento() {
return (
<div className="AutoAtendimento">
<Banner className="Cliente" titulo="Sou Cliente">
Clique aqui para acessar suas informações
</Banner>
<hr />
<Banner className="Associado" titulo="Sou Associado">
Clique aqui para fazer login como Associado
</Banner>
</div>
)
};
ReactDOM.render(<AutoAtendimento/>, document.getElementById('root'));
.AutoAtendimento {
background-color: #ffffff;
}
.AutoAtendimento .Cliente {
background-color: #000000;
font-size: 20px;
color: #fff;
height: 40px;
}
.AutoAtendimento .Associado {
background-color: #EFEFEF;
font-size: 20px;
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>