css - 如何在没有类的情况下使用JSS设置输入标签的样式

我正在我的应用程序中使用react select组件。我也只是用jss设计我的应用程序。我的问题是，因为react select是一个npm包，所以我没有能力修改组件中的类名。所以有一个输入，我需要以我的风格为目标。

<div class="Select-input"><input type="text" name="style-me" /></div>

我的jss有点像这样：

jss.setup(preset());

const stylus = {
   'Select-input': {
       background: 'red'
   }
}

const { classes } = jss.createStyleSheet(stylus).attach();

我需要在jss中做什么来设置子输入标记的样式？

最佳答案

根据this答案，您可以传入react select的类名。我的其余回答显示了如何针对子元素。
我在github页面上查看了jss：
https://github.com/cssinjs/jss
这里有一个嵌套css规则的实例：
https://github.com/cssinjs/examples/blob/gh-pages/plugins/jss-nested/simple/app.js
在针对嵌套<button>元素的代码中，它使用名为& button的属性。注意与号和button之间的空格。因此，对于您的特定代码，您可以针对这样的<input>：

jss.setup(preset());

const stylus = {
   'Select-input': {
       background: 'red',
       '& input': {
            /* your input styles here */
       }
   }
}

const { classes } = jss.createStyleSheet(stylus).attach();

关于css - 如何在没有类的情况下使用JSS设置输入标签的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41134238/