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

Question

我正在我的应用程序中使用 react-select 组件。我也只使用 JSS 设计我的应用程序。我的问题是，由于 react-select 是一个 npm 包，我没有能力修改组件中的 class 名称。所以那里有一个输入，我需要用我的样式来定位。

<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

假设您指的是这个包：

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

你实际上可以传入 className 作为 prop

Answer 2

根据的回答，您可以为 react-select 传入一个 class 名称。我的其余答案显示了如何定位子元素。

我在这里检查了 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 之间的 space。因此，对于您的特定代码，您可以像这样定位 <input>：

jss.setup(preset());

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

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

Answer 3

你总有至少两种方式：

传递生成的class名称

默认情况下使用 JSS，避免使用无作用域的 class 名称。使用生成的 class 名称并将其传递给您要使用的组件

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


<Input className={classes.input} />

使用范围全局选择器

如果无法传递 class 名称，您仍然可以使用局部范围的全局选择器

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

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

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

How to style input tag without class with JSS

css

reactjs

jss