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;
}