如何正确使用带有 React 组件的 .scss 模块

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"?

Answer 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>
);