Skip to content

Commit

Permalink
Added React section
Browse files Browse the repository at this point in the history
  • Loading branch information
Harry-Ross authored Sep 29, 2023
1 parent 7aa9e1c commit 92dfafa
Showing 1 changed file with 30 additions and 0 deletions.
30 changes: 30 additions & 0 deletions rules/scoped-css/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ uri: scoped-css
authors:
- title: Jack Reimers
url: https://www.ssw.com.au/people/jack-reimers
- title: Harry Ross
url: https://www.ssw.com.au/people/harry-ross
created: 2023-09-29T12:00:00.000Z
guid:
---
Expand Down Expand Up @@ -61,3 +63,31 @@ Angular also offers the `::ng-deep` pseudo selector, but there are [some conside
[Component Styles - Angular Docs](https://angular.io/guide/component-styles)

### React

We can achieve local, component-level styles in React by using importing from a file ending in `module.css`:

```css
/* component.module.css */

.heading {
font-weight: 700;
}
```

```jsx
import styles from "component.module.css";

const Component = () => {
return (
<h1 style={styles.heading}>Bold Heading Here</h1>
)
}
```

This will then render the element with a component specific class, differentiated from other `.heading` elements:

```html
<h1 class="Component_heading__nEBhk">Bold Heading Here</h1>
```


0 comments on commit 92dfafa

Please sign in to comment.