我在我的应用上使用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中我需要做什么来设置子输入标记的样式?
答案 0 :(得分:6)
根据this回答,你可以传递一个反应选择的类名。我的其余部分显示了如何定位子元素。
我在这里检查了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();
答案 1 :(得分:5)
答案 2 :(得分:0)
您始终至少有两种方式:
默认情况下使用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>