How to reference child class when using SCSS is in CSS modules?

Question

I have this (scss) css module:

// foo.module.scss

.tableThemeA {
  tbody {
    td {
      .colHeader {
        ...
      }
    }
  }
}

I am referencing the styles like so:

import styles from './foo.module.scss';
...
<table classsName={styles.tableThemeA}>
  ...      
  <tbody>
    <td>
      <span className={styles.tableThemeA.tbody.td.colHeader}></span>
    </td>
  </tbody>
</table>

but I'm getting the following message:

TypeError: Cannot read property 'td' of undefined

Answer 1

This css code means that you have a markup with a class tableThemeA which has a child markup tbody which has a child markup td which has a child markup with a class colHeader so to access to this style you must have to follow it inheritance.

.tableThemeA {
  tbody {
    td {
      .colHeader {
        ...
      }
    }
  }
}

So to refer to this style you must do this:

import styles from './foo.module.scss';
...
<table classsName={styles.tableThemeA}> // class tableThemeA
  ...      
  <tbody> // child tbody
    <td> // child td
      <span className={styles.colHeader}></span> // class colHeader
    </td>
  </tbody>
</table>