How to properly use .scss modules with React components

Question

I have a question regarding how to correctly use .scss modules(and common css modules) when it comes to use the same .scss module in several components at once.

For instance: if a parent & its children need to access the same exact .scss module, which way is the best to access the module?

Assume I have a .scss module which contains all styles and a component AudioPlayer that has a structure like this:

 import audioPlayerModule from './SCSS/AudioPlayer.module.scss';
 /*Some code*/
 return (
    <div className={audioPlayerModule.audio_container}>
        <LeftControls/>
        <CenterControls />
        <RightControls/>
    </div>)

The main AudioPlayer component uses the module audioPlayerModule. Then let's say I need this module again inside the child component LeftControls:

import audioPlayerModule from './SCSS/AudioPlayer.module.scss';
const LeftControls = () => {
      return (
      <div className={audioPlayerModule.left_controls_container}></div>
);
}

Thus I have imported the same .scss module "audioPlayerModule" to parent & each of its children. Is there any better way to do it without using "props.children"?

Pratik Wadekar · Accepted Answer · 2022-07-14 09:28:52Z

1

You can pass className props to your child components

<LeftControl className={audioPlayerModule.left_controls_container}/>

and then spread this props in child

const LeftControls = ({props}) => {
      return (
      <div {...props}></div>
);

answered Jul 14, 2022 at 9:28

Pratik Wadekar

1,2749 silver badges19 bronze badges

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

2 Comments

Notorious Zet Over a year ago

Wouldn't passing down the className to each child produce a lot of trash code due to prop drilling?

Pratik Wadekar Over a year ago

With the approach I mentioned, prop drilling is happening only at one level. If only that's your use case I think it pretty much acceptable to prop drill.

Collectives™ on Stack Overflow

How to properly use .scss modules with React components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related