How can I set the table tr in css module (nested css)

Question

I am using css module like this ,

.catTable{
  border:1px black solid;
}

in 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>);

It works well but I want to set the css for tr too

So I made the code like this below.

in normal css I can set like this,

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

in 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>);

However border of tr doesn't work, where should I change?

Answer 1

You can try applying styles directly without using any class like this

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