2

Estou usando o react.js (no exemplo o create react app) e cheguei a criar dois componentes, porém não consegui isolar o .css de cada componente. O css do tabelaInfo.css acaba sendo aplicado nos outros componentes que possuem as mesmas classes, ou seja ele está sendo global. Como posso isolar o tabelaInfo.css para ser aplicado somente no componente TabelaInfo?

Segundo minhas pesquisas seria algo como o Scoped CSS do Vue.js.

TabelaInfo.js

import React from 'react';

import styles from './tabelaInfo.css';

export default class TabelaInfo extends React.Component {
 render() {
 return (
        <table>
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Tipo</th>
                    <th>Altura</th>
                    <th>Peso</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Bulbasauro</td>
                    <td>Planta</td>
                    <td>2</td>
                    <td>100kg</td>
                </tr>
            </tbody>
        </table>
    )
 }
}

tabelaInfo.css

table{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}
table tr th{
    background-color: #f1f1f1;
    border: 1px solid #dadada;
    height: 30px;
    padding-left: 10px;
    font-size:15px;
    color: #333333;
    font-weight: 500;
    padding-top: 6px;
    text-align: left;
}
table tr td{
    border: 1px solid #dadada;
    height: 30px;
    padding-left: 10px;
    font-weight: normal;
    font-size: 15px;
    padding-top: 6px;
}
1
  • O elemento acaba retornando "TabelaInfo" como uma classe de cada elemento?
    –  deLiz
    31/05/2017 às 3:56

1 Resposta 1

1

Uma das soluções propostas pela documentação do React é o uso de estilos inline.

Em React, estilos inline são definidos como um objeto JavaScript, sendo que:

  • A chave é a versão em camelCase do nome do estilo (i.e. backgroundColor)
  • O valor é o valor do estilo, normalmente uma string (i.e. '#FFF')

Dessa maneira, o seu caso ficaria mais ou menos assim (apenas função render):

render() {
  const style = {
    width: '100%';
    tableLayout: 'fixed';
    borderCollapse: 'collapse';
    // Demais propriedades
  };

  return (
    <table style={style}>
      <thead>
        <tr>
          <th>Nome</th>
          <th>Tipo</th>
          <th>Altura</th>
          <th>Peso</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Bulbasauro</td>
          <td>Planta</td>
          <td>2</td>
          <td>100kg</td>
        </tr>
      </tbody>
    </table>
  )
}

Você pode ler uma discussão sobre boas práticas de uso do estilo inline em React aqui (em inglês).

1
  • interessante, cheguei a ver também um pouco de CSS Modules, porém não consegui chegar a algo parecido com scoped css do vue.js
    – haykou
    31/05/2017 às 12:12

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 .