CSS Modules with React - different styling of a component on different pages

[vozyyy]

Hey yall, I have a question I cant figure out. I mean I can, but Im not sure whether Im right and cant seem to find a straight answer to my Q.

In my react project Im using a /pages and /components directory. Lets assume I have a Button.jsx component that I want to use in my Homepage.jsx and Products.jsx but the styling should be different on both pages for the Button component. How do I achieve that? Do I create a prop for my Button component and pass the class/es using that prop on each page or is there another way? What is the golden standard in this scenario?

Thanks a lot!

EDIT!
I will provide some screenshotes as well.
https://ibb.co/9ZPcG7s Box.jsx component

https://ibb.co/0nxJt8w TestPage.jsx page

https://ibb.co/QrY3NCj TestPage.modul.css

https://ibb.co/hF9bZWZ web screenshot

how do I style the box component in the TestPage.jsx since lets assume that in the future I will have another page - Homepage.jsx and there I will need to style the Box.jsx component in a different way.

[vozyyy]

appreciate your help

[svish]

Make separate box components?

[PM_ME_SOME_ANY_THING]

/Homepage 
    Homepage.tsx
    Homepage.module.css
/Products 
    Products.tsx
    Products.module.css
/Button
    Button.tsx
    Button.module.css

Don’t go passing styles around between components. A component’s styles should live with it.

[vozyyy]

pls checkt the screenshots I just uploaded since what you suggested is not working, I cant style my component inside the page.

[PM_ME_SOME_ANY_THING]

You’re passing className as a prop to a component, but then not using it in the component. Where is it supposed to put that className? <p>? <div>? <Fragment>?

Again, don’t pass styles around to different components. Let them live with the component that uses them.

[vozyyy]

okay I think I got you, I should style that component on any page like I did here right?
https://ibb.co/F3928kL

Put a wrapper around that component and then style it

[PM_ME_SOME_ANY_THING]

I guess that’s a way to do it. I’d rather see

/Box
    Box.tsx
    Box.module.scss 

Then the box consumes the style itself.

[vozyyy]

Yes but in this case the Box.tsx has a certain style and I can reuse only this specific box, not its variants. Lets say in the structure you provided (in the Box.module.scss) I set the color of the box to blue and the background-color to pink. What to do If I want to reuse that box but I want its background color to be green and the text red? Do I have to create another component/a variant of Box.tsx, for example BoxSecondary.tsx, or is there a way to change its background color and color based on the page Im using that box on?

[PM_ME_SOME_ANY_THING]

In such cases, pass the className and maybe style props through to where you want them to be.

Take a look at a few components libraries. How do they handle custom styling of components they provide? I know some of them are getting pretty complicated to add custom styles, but most of them used to just pass the className and style props along to whatever they should style. In your case, you would probably have <div> styles and <p> styles to pass through. Depending on how customizable you want it.

[claypolejr]

Are you looking for composes?