CSS does not access HTML subclasses in React

Question

I’m having trouble accessing one class within another. I have the function 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

Various Banners are organized within the Component 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;

In my css AutoAtendimento.css I want to manipulate some characteristics of className="Cliente" that’s inside className="AutoAtendimento". So I try to access it like this:

.AutoAtendimento .Cliente {
    background-image: url('../../media/associado-vermelho.png');
    background-color: blue;
}

But nothing changes, no error message appears, what the reason?

Answer 1

The question is whether you’re going over the props correctly to the component Banner?, with all this I decided to exemplify so the component Banner has the following code:

function Banner({children, titulo, className}) {
  return (
    <div className={className}>{children}</div>
  )
}

in this component I pass the information of its properties to use the classes css as an example, ready, this will already work, when creating components and the same has properties, needs to be passed on if not really will not work.

Final example:

function Banner({children, titulo, 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>