css - 如何使用 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回答，你可以为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();