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, titulo, 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:

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

    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'));

<!-- language: lang-css -->

    .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;
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->