css - 在 React 中注入(inject) JSS 而无需编辑要设置样式的组件

Question

如何在不修改要设置样式的组件的情况下将 CSS 转换为 JSS？

我正在为我的 React 元素使用 emoji-mart 选择器，为了让它可用，我需要导入一个 css 文件。但是，我们有一个不支持导入的 css 文件的解析器，我认为将它转换为 JSS 是答案，但到目前为止我无法让它工作。

我曾尝试将其转换为样式对象并使用 withStyles 和 injectStyles 注入(inject)它，但运气不佳。

        <div className="emoji-mart-bar">

我尝试设置样式的组件看起来像上面那个，我认为 withStyles 和 injectStyles 不起作用的原因是因为它没有使用 className={classes.[className]} 但我可能是错的。提前致谢!

Answer 1

我们采用的解决方案是引入一个新类并选择其子类，如下所示:

const styles = {
container: {
  '& .emoji-mart-bar': {
    backgroundColor: "white !important"
  },
  ...
},
}

<div className={classes.container}>
  <Picker /> //Emoji mart picker
</div>