Estou tendo dificuldade em acessar uma classe dentro de outra. Possuo a função Banner
:
import React from 'react';
import './Banner.css';
function Banner(props) {
return (
<div className="Banner">
<div className="Conteudo">
{props.titulo}
</div>
<div className="Footer">
{props.children}
</div>
</div>
)
};
export default Banner
Vários Banners são organizados dentro do Componente AutoAtendimento
:
import React from 'react';
import Banner from './Banner.jsx';
import './AutoAtendimento.css';
function AutoAtendimento() {
return (
<div className="AutoAtendimento">
<Banner className="Cliente" titulo="Sou Cliente">
Clique aqui para acessar suas informações
</Banner>
<Banner className="Associado" titulo="Sou Associado">
Clique aqui para fazer login como Associado
</Banner>
</div>
)
};
export default AutoAtendimento;
No meu css AutoAtendimento.css
quero manipular algumas características de className="Cliente"
que está dentro de className="AutoAtendimento"
. Para tanto tento acessar assim:
.AutoAtendimento .Cliente {
background-image: url('../../media/associado-vermelho.png');
background-color: blue;
}
Mas nada muda, nenhuma mensagem de erro aparece, qual o motivo?