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

时间:2016-12-14 03:13:26

标签: css reactjs jss

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

3 个答案:

答案 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)

假设你指的是这个包:

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

您实际上可以将className作为道具传递

答案 2 :(得分:0)

您始终至少有两种方式:

  1. 传递生成的班级名称
  2. 默认情况下使用JSS,避免使用未绑定的类名。使用生成的类名并将其传递给您要使用的组件

    const {classes} = jss.createStyleSheet({
      input: {background: 'red'}
    }).attach()
    
    
    <Input className={classes.input} />
    
    1. 使用范围全局选择器
    2. 如果无法传递类名,您仍然可以拥有本地范围的全局选择器

      const {classes} = jss.createStyleSheet({
        container: {
          '@global': {
            input: {background: 'red'}
          }
        }
      }).attach()
      
      <div className={classes.container}>
        <Input />
      </div>