我正在尝试创建一种简单的方法来覆盖使用CSS模块的React组件中的CSS类。

我可以看到从styles导入并通过theme传递的类的字符串化名称，但是我似乎无法弄清楚如何看到实际的CSS属性。

是否可以访问它们并将它们合并为一个新类，然后可以通过classname应用？

// component1.scss
.base {
  background-color: black; <-- override this property
}

// component1.js
import Component2 from './component2';
import styles from './component1.scss';

const theme = {
 base: styles.base
};

function Component1() {
 return <Component2 theme={theme} />;
}


// component2.scss
.base {
  background-color: yellow;
  text-align: center;

  ul {
    margin: 10px;
  }
}

// component2.js
import Component2 from './component2';
import styles from './component2.scss';


function Component2({ theme }) {
 return (
    <div classname={() => someFunctionThatMergesCss(styles,theme)}>
      <ul>
      ...
      </ul>
    </div>
  );
}