Question 74248 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to use subsequent-sibling selector in React CSS modules – Reactjs

How would I write and call this CSS in React CSS Modules?

.is-invalid ~ .validationError {
    display: inline !important;
}

Calling styles.validationError does not work.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to fix this by using global.

    :global(.is-invalid)~.validationError {
    display: inline !important;
}

    I can now call ${syles.validationError} and it works.


  2. 0 
    return (
  <>
    <div className={styles['is-invalid']}>
    
    </div>
    {/* some Node or nothing, is-invalid and validationError are brothers. */}
    <div  className={styles.validationError}>123</div>
  </>
)
    Login or Signup to reply.
  3. 0

    You are referring to babel-plugin-react-css-modules in the question tags, but don’t provide any further context how you use it. This makes it hard to understand your exact problem, but I’ll give it a shot anyway.

    I assume you are trying to import a CSS file as a module like this:

    import styles from "./styles.module.css"

const MyComponent = () => {
  return <div>
    <input className={styles['is-invalid']} />
    <div className={styles.validationError}>...</div>
  </div>
}

    Your CSS will generate two locally scoped classes when imported as a CSS module. The code above works as expected when you use regular CSS modules, for example via a Webpack loader.

    However, the Babel plugin that you use actually expects a different way of adding styles. Here is what you should do according to the documentation:

    // no need for named import here
import "./styles.module.css"

const MyComponent = () => {
  // note the different attribute: `styleName`
  //   - `styleName` uses a literal string
  //   - before, `className` used a variable from the imported `styles` module
  return <div styleName="validationError">...</div>
}

    babel-plugin-react-css-modules will load the CSS at compile time and replace the styleName attributes with the scoped classNames inline. The docs linked above explain this in further detail.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search