CSS Como tirar conflitos de CSS

[Dimitri Monteiro]

Olá pessoal, sou novo aqui e preciso de uma ajuda, estou sofrendo um pouco com stylesheets CSS, vou situar vocês para que possam me ajudar melhor.

Na empresa na qual estou trabalhando, eles tem um padrão bem rígido para as páginas, fazendo com que todas as páginas são "index.js" e "style.css". Em todas as páginas, temos a div "card" e na minha não é diferente, porém, quando eu altero a div "card" na minha página, TODAS as outras que também possuem card são alteradas para os valores que eu coloquei.

Na primeira imagem, está a minha página que está correta.

Na segunda imagem, está outra página que está sofrendo conflito com o card que eu alterei na MINHA página

aqui está o meu código CSS:
 

.card{
  height: 600px;
  width: 115%;
  padding: 4rem;
  text-align: center;
}

E aqui está o meu código JS/React

 return (
<div> 
    <div className="splitter">
        <Splitter style={{ height: '70px' }}>
        <div className="ieotxt">4,75%</div>
        <div className = "LLTXT">82,1 Mi</div>
        <div className=  "CLLTXT">9,55 %</div>
        <div className = 'EBI'>1.2 Bi</div>
        <div className = "RSPL">132,19 %</div>
        <div className = "ROI">161,12 %</div>
        <div className = "LA">44,45 %</div>
        <SplitterPanel className="flex align-items-center justify-content-center" size={14} minSize={14} > IEO</SplitterPanel>
        <SplitterPanel className="flex align-items-center justify-content-center" size={14} minSize={14} >Lucro Líquido</SplitterPanel>
        <SplitterPanel className="flex align-items-center justify-content-center" size={14} minSize={14} >Cresc Lucro Líquido</SplitterPanel>
        <SplitterPanel className="flex align-items-center justify-content-center" size={14} minSize={14} >EBITDA</SplitterPanel>
        <SplitterPanel className="flex align-items-center justify-content-center" size={14} minSize={14} >RSPL</SplitterPanel>
        <SplitterPanel className="flex align-items-center justify-content-center" size={14} minSize={14} >ROI</SplitterPanel>
        <SplitterPanel className="flex align-items-center justify-content-center" size={14} minSize={14} >Limite Alavancagem</SplitterPanel>   
        </Splitter>
    </div>

        <div className>
            <div className="graficoLinha" style={{boxShadow: "0 8px 16px 0 rgba(0,0,0,0.2)"}}>
                <div className="card" style={{height: "600px;"}}>
            <Chart type="line" data={chartDataLine} options={chartOptionsLine} /> 
                </div>
            </div>
        </div>

        <div>
           <div className="graficoVertical">
                <Chart className="card" style={{boxShadow: "0 8px 16px 0 rgba(0,0,0,0.2)"}} type="bar" data={chartDataVertical} options={chartOptionsVertical} />
            </div> 
        </div>

        <div>
             <div className="doughnut1">
                <div className="card" style={{boxShadow: "0 8px 16px 0 rgba(0,0,0,0.2)"}}>
             <div className = 'DadoDonut'>212,00  Mi</div>
                <Chart type="doughnut" data={chartDataDonut} options={chartOptionsDonut} className="w-full md:w-30rem" /> </div>
                </div>
        </div>

        <div>
            <div className="graficoHorizontal">
                <div className="card" style={{boxShadow: "0 8px 16px 0 rgba(0,0,0,0.2)", height: "600px;"}}>
            <ToggleButton checked={check1} onChange={(e) => {setCheck1(e.value); setOnClick('Habilitado')}} onLabel="Remover" offLabel="Detalhar" onIcon="pi pi-eye-slash" offIcon="pi pi-eye" 
            style={{width: '10em'}} />
             {check1 === true ? (
              <div className="dadosHorizontal">
                Valores em Mi 
              </div>
            ) : null}
                <Chart type="bar" data={chartDataHorizontal} options={chartOptionsHorizontal} />
            </div>
            </div>
        </div>
</div>
  );
};

Qualquer sugestão, crítica e/ou elogio me ajuda bastante a crescer nessa carreira. Obrigado pela atenção

 

 

 

 

[Rafael3DD]

Só usar id e pegar esse id para filtrar.

#id .card{
      height: 600px;
      width: 115%;
      padding: 4rem;
      text-align: center;
}

 

[Duncan]

TB pode-se usar css modules
https://github.com/css-modules/css-modules

[Dimitri Monteiro]

obrigado a todos que responderam, devido ao meu prévio conhecimento limitado com CSS, decidi ir estudar mais, e descobri que para tirar os conflitos com as outras páginas externas, era só declarar a classe junto com a tag "card".

e assim ficou o meu código CSS finalizado:
 

.graficoHorizontal .card{
  height: 600px;
  width: 115%;
  padding: 4rem;
  text-align: center;
}

agradeço novamente a todos que responderam, e espero que essa solução ajude outros com dúvida!