How to style input tag without class with JSS

Assuming you're referring to this package:

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

You can in fact pass in className as a prop

You have always at least 2 ways:

1. Pass the generated class name

Use JSS as you should by default, avoid unscoped class names. Use generated class name and pass it to the component you want to use

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


<Input className={classes.input} />

2. Use scoped global selector

If its impossible to pass a class name, you can still have a locally scoped global selector

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

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

According to this answer, you can pass in a class name for react-select. The rest of my answer shows how to target child elements.

---

I checked the github page for JSS here:
https://github.com/cssinjs/jss

They have a live example for nested CSS rules here:
https://github.com/cssinjs/examples/blob/gh-pages/plugins/jss-nested/simple/app.js

In the code to target a nested <button> element, it uses a property named & button. Notice the space between the ampersand and button. So for your specific code, you can target the <input> like this:

jss.setup(preset());

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

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