如何使用JSS为没有类的输入标记设置样式

Question

我在我的应用程序上使用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中我需要做什么来设置子输入标记的样式？

Answer 1

根据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();

Answer 2

假设你指的是这个包：

https://github.com/JedWatson/react-select

事实上你可以通过className作为道具

Answer 3

你总是至少有两种方式：

1. 传递生成的类名

默认使用JSS，避免使用未编写的类名。使用生成的类名并将其传递给要使用的组件

const {classes} = jss.createStyleSheet({
  input: {background: 'red'}
}).attach()


<Input className={classes.input} />

2. 使用范围全局选择器

如果无法传递类名，您仍然可以拥有本地范围的全局选择器

const {classes} = jss.createStyleSheet({
  container: {
    '@global': {
      input: {background: 'red'}
    }
  }
}).attach()

<div className={classes.container}>
  <Input />
</div>