0

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?

0

1 Resposta 1

1

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:

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>

3
  • Virgilio, reparei que você criou uma propriedadetitle em Banner e dentro de AutoAtendimento atribuiu titulo="Sou Cliente/Associado". e não title="Sou Cliente/Associado". Mas isso não trouxe nenhum problema. title é uma palavra reservada?
    – yoyo
    Commented 18/08/2020 às 15:14
  • 1
    @yoyo é uma simples props! dê uma lida reactjs.org/docs/components-and-props.html
    – novic
    Commented 18/08/2020 às 15:48
  • @yoyo essa propriedade não foi utilizado, eu fiz como exemplo mesmo ...
    – novic
    Commented 18/08/2020 às 15:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .