如何在css模块（嵌套css）中设置表tr

Question

我正在使用这样的CSS模块，

.catTable{
  border:1px black solid;
}

在 jsx 中

import styles from "../css/basic-styles.module.css";
return (
  <table className={styles.catTable}>
      <tr><td>test1</td><td>test2</td></tr>
      <tr><td>test3</td><td>test4</td></tr> 
  </table>);

效果很好，但我也想为

tr

设置 css

所以我编写了如下代码。

在普通的CSS中我可以这样设置，

.catTable{
    .catTr {
        border:1px pink solid;
    } 
     border:1px black solid;
 }

在 jsx 中

import styles from "../css/basic-styles.module.css";
return (
  <table className={styles.catTable}>
      <tr className={styles.catTr><td>test1</td><td>test2</td></tr>
      <tr><td>test3</td><td>test4</td></tr> 
  </table>);

但是tr的边框不起作用，我应该在哪里更改？

Answer 1

您可以尝试在根级别设置所有样式，然后访问它们。

.catTable{
     border:1px black solid;
}
.catTr {
    border:1px pink solid;
} 

JSX：

import styles from "../css/basic-styles.module.css";
return (
  <table className={styles.catTable}>
      <tr className={styles.catTr><td>test1</td><td>test2</td></tr>
      <tr><td>test3</td><td>test4</td></tr> 
  </table>);