我在我的应用程序中使用 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 传入一个类名。我的其余答案展示了如何定位子元素。
我在这里查看了 JSS 的 github 页面：
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();
【讨论】：
你总是至少有两种方式：
默认情况下使用 JSS，避免使用无范围的类名。使用生成的类名并将其传递给您要使用的组件
const {classes} = jss.createStyleSheet({
input: {background: 'red'}
}).attach()
<Input className={classes.input} />
如果无法传递类名，您仍然可以使用本地范围的全局选择器
const {classes} = jss.createStyleSheet({
container: {
'@global': {
input: {background: 'red'}
}
}
}).attach()
<div className={classes.container}>
<Input />
</div>
【讨论】：
【讨论】：