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