在 CSS 模块中使用 SCSS 时如何引用子 class？

Question

我有这个 (scss) css 模块:

// foo.module.scss

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

我引用的样式是这样的：

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

但我收到以下消息：

TypeError: Cannot read property 'td' of undefined

Answer 1

这个 css 代码意味着您有一个带有 class tableThemeA 的标记，它有一个子标记 tbody，它有一个子标记 td它有一个带有 class colHeader 的子标记，因此要访问此样式，您必须遵循它继承。

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

因此，要引用此样式，您必须这样做：

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>

在 CSS 模块中使用 SCSS 时如何引用子 class？

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

sass

css-modules