在React中注入JSS而不编辑要设置样式的组件

Question

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

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

我尝试将其转换为样式对象，并使用withStyles和injectStyles进行注入，但运气不佳。

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