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?

@whitebear, I am not sure, but in this code you write <tr className={styles.catTr> instead of <tr className={styles.catTr}>. Maybe this can resovle your error. — Abhay Dedkawala
– Abhay Dedkawala, Commented Jul 29, 2024 at 6:07

Konul Memmedova · Accepted Answer · 2024-07-30 10:54:39Z

1

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

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

answered Jul 30, 2024 at 10:54

Konul Memmedova

1401 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

whitebear Over a year ago

THank you very much I can nest the tag like this,

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related