Change properties of a css module from a component in another css module

Answered

Common paper wasp posted this in #help-forum

Common paper waspOP

2024-02-04T23:45:44.000Z

Simple example:

This is my Home.tsx

export default function Home() {
   return (
    <Myh1 />
  );
}

This is Myh1.tsx

import styles from "./myh1.module.css";

export default function Myh1() {
    return <h1 className={styles.text}>Teste</h1>
}

This is myh1.module.css

.text {
    color: red;
}

I want to know how in my home.module.css I can access the .text class and change its color inside my home.module.css

I tried to do this in myhome.module.css but it didn't work

@import "../myh1/myh1.module.css";

.text {
    color: green;
}

Answered by Ray

try this

return (
  <Myh1 additiveClass={[styles.green, styles.blue]} />
);

.green {
  color: green;
}

.blue {
  color: blue;
}

import styles from "./myh1.module.css";

export default function Myh1({ additiveClass = [] }: { additiveClass: string[] }) {
  return <h1 className={[styles.text, ...additiveClass].join(" ")}>Teste</h1>
}

View full answer

5 Replies

Munchkin

2024-02-05T00:56:12.000Z

You can import styles from your module in the Home() again and then write code to edit the css.

Otherwise what i think is better practice is to import in your layout.jsx/tsx

This way it gets imported into the whole project and thus becomes accessible without having to import more than once.

and for this you might have to do that in html as i am not sure that css files can talk to each other

@Common paper wasp Simple example: This is my `Home.tsx` tsx export default function Home() { return ( <Myh1 /> ); } This is `Myh1.tsx` tsx import styles from "./myh1.module.css"; export default function Myh1() { return <h1 className={styles.text}>Teste</h1> } This is `myh1.module.css` css .text { color: red; } I want to know how in my `home.module.css` I can access the `.text` class and change its color inside my `home.module.css` I tried to do this in my` home.module.css` but it didn't work css @import "../myh1/myh1.module.css"; .text { color: green; }

Ray

2024-02-05T00:59:39.000Z

something like this

export default function Home() {
  return (
   <Myh1 blueText />
 );
}

import styles from "./myh1.module.css";

export default function Myh1({blueText}) {
    return <h1 className={blueText ? styles.textBlue : styles.text}>Teste</h1>
}

.text {
  color: red;
}

.textBlue{
  color: blue;
}

@Ray something like this ts export default function Home() { return ( <Myh1 blueText /> ); } import styles from "./myh1.module.css"; export default function Myh1({blueText}) { return <h1 className={blueText ? styles.textBlue : styles.text}>Teste</h1> } .text { color: red; } .textBlue{ color: blue; }

Common paper waspOP

2024-02-05T01:36:38.000Z

Your example gave me an alternative.
Would there be another way to do this, but more flexible to use in a media query without creating an additiveClass?

return (
    <Myh1 additiveClass={styles.green} />
  );

.green {
    color: green;
}

import styles from "./myh1.module.css";

export default function Myh1({ additiveClass }: { additiveClass?: string }) {
    return <h1 className={`${styles.text} ${additiveClass ?? ""}`}>Teste</h1>
}

@Common paper wasp Your example gave me an alternative. Would there be another way to do this, but more flexible to use in a media query without creating an additiveClass? jsx return ( <Myh1 additiveClass={styles.green} /> ); css .green { color: green; } jsx import styles from "./myh1.module.css"; export default function Myh1({ additiveClass }: { additiveClass?: string }) { return <h1 className={`${styles.text} ${additiveClass ?? ""}`}>Teste</h1> }

Ray

2024-02-05T01:41:16.000Z

try this

return (
  <Myh1 additiveClass={[styles.green, styles.blue]} />
);

.green {
  color: green;
}

.blue {
  color: blue;
}

import styles from "./myh1.module.css";

export default function Myh1({ additiveClass = [] }: { additiveClass: string[] }) {
  return <h1 className={[styles.text, ...additiveClass].join(" ")}>Teste</h1>
}

Answer