I am using css module like this ,
<code>.catTable{
border:1px black solid;
}
</code>
<code>.catTable{
border:1px black solid;
}
</code>
.catTable{
border:1px black solid;
}
in jsx
<code>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>);
</code>
<code>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>);
</code>
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,
<code>.catTable{
.catTr {
border:1px pink solid;
}
border:1px black solid;
}
</code>
<code>.catTable{
.catTr {
border:1px pink solid;
}
border:1px black solid;
}
</code>
.catTable{
.catTr {
border:1px pink solid;
}
border:1px black solid;
}
in jsx
<code>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>);
</code>
<code>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>);
</code>
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?