CSS Module direct descendant

user_1491433 0
Viewed 140

I am trying to use CSS modules in a React application but I want to target direct descendants. Specifically I would like to create a 'striped list'. The CSS I am using would look like

.striped-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  max-width: 200px;
}
.striped-list > li {
  border-bottom: 1px solid rgb(221, 221, 221);
  padding: 6px;
}
.striped-list > li:nth-of-type(odd) {
  background-color: #e9e9f9;
}
.striped-list > li:last-child {
  border-bottom: none;
}
.striped-list > li:hover {
  background-color: yellowgreen;
}

I can use this style sheet with something like

import 'StripedList.css';

But I would like to use CSS modules so I can avoid global CSS. So I would like have something like

import styles from './StripedList.css';

Then I could use the styles like

<ul className={styles.stripedList}>

But this doesn't work. I think it is because the CSS specifies direct descendants with '>' which I am not sure how it translates when using CSS modules. Or maybe there is a better way to get this appearance?

css-modules css-selectors css
1 Answers

If you are using webpack, then you have to enable the modules:

{
  loader: 'css-loader',
  options: { 
    modules: true
  }
}
user_100950790
Related