Skip to content

Commit 5501237

Browse files
committed
Use class selector instead of element selectors
As far as I can tell `css-modules` locally scope class selectors but not element selectors in from the component css file. This means that the `GlobalSelectors` example is slightly misleading since: ``` .root :global p { ... } ``` and ``` .root p { ... } ``` Both have the desired result of styling all the `p` tags inside the elements with the `.root` class applied. Updating the example to use a, semantically meaningless, class makes things clearer for people going through the examples.
1 parent 11be9b8 commit 5501237

File tree

2 files changed

+2
-2
lines changed

2 files changed

+2
-2
lines changed

src/components/2-GlobalSelectors/GlobalSelectors.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
max-width: 400px;
88
}
99

10-
.root :global p {
10+
.root :global .text {
1111
color: brown;
1212
font-size: 24px;
1313
font-family: helvetica, arial, sans-serif;

src/components/2-GlobalSelectors/GlobalSelectors.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default class GlobalSelectors extends Component {
77
render() {
88
return (
99
<div className={ styles.root }>
10-
<p>Global Selectors</p>
10+
<p className="text">Global Selectors</p>
1111
</div>
1212
);
1313
}

0 commit comments

Comments
 (0)