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

Posted 2023-02-22

【中文标题】如何使用 JSS 为没有类的输入标签设置样式

【英文标题】：How to style input tag without class with JSS

【发布时间】：2017-04-29 06:57:02

【问题描述】：

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

【参考方案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();

【讨论】：

很棒的答案，再好不过了。这正是我一直在寻找的。非常感谢？

【参考方案2】：

你总是至少有两种方式：

传递生成的类名

默认情况下使用 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>

【参考方案3】：

假设你指的是这个包：

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

实际上你可以传入className 作为道具

【讨论】：

有趣，感谢您的评论，我不知道您也可以定位输入。谢谢