Skip to main content
adicionou 1 caractere ao conteúdo
Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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

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:

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

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>

Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

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:

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