How to override default style with ReactJSS?

Question

I've implemented a table in my component:

  <table className={classes.vehicleStatusTable}>
    <thead>
      <tr>
        <th>MILEAGE</th>
        <th>TREAD <FontAwesomeIcon icon={faEye}/></th>
        <th>PRESSURE <FontAwesomeIcon icon={faEye}/></th>
        <th>CLEAN</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span className={classes.unknown}>Unknown</span></td>
        <td><HealthDot value={0} healthRange={null} size='large' /></td>
        <td><HealthDot value={0} healthRange={null} size='large' /></td>
        <td><HealthDot value={0} healthRange={null} size='large' /></td>
      </tr>
    </tbody>
  </table>

Here's the applicable style in my styles file:

  vehicleStatusTable: {
    width: '600px',
    '& thead': {
      '& tr': {
        '& th': {
          fontWeight: 'normal',
          textAlign: 'center'
        }
      }
    },
    '& tbody': {
      '& tr': {
        '& td': {
          textAlign: 'center'
        }
      }
    }    
  }

The 'center' alignment is appropriate for all of the columns except for the first one.

I've tried several different things to force the first column's alignment to be left but none work. Any ideas how I can fix this?

Answer 1

Why don't you add a class to every first element of first column ?

or try using CSS :nth-child() Selector

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Here, we specify a background color for all p elements whose index is a multiple of 3:

p:nth-child(3n+0) {
  background: red;
}

you can see how people are using such selectors in these stackoverflow questions and answers

How to use pseudo selectors in material-ui?

How to get first child to work with JSS-Nested

Answer 2

The solution turns out to be quite simple. Here's an example:

<td style={{textAlign: 'left'}}