Skip to content

Commit

Permalink
Merge pull request #245 from selbekk/patch-1
Browse files Browse the repository at this point in the history
Add note about removing CSS warning
  • Loading branch information
mjackson committed Aug 12, 2019
2 parents 099d361 + 3ea9a69 commit b904555
Showing 1 changed file with 16 additions and 1 deletion.
17 changes: 16 additions & 1 deletion www/src/pages/styling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,26 @@ Styling a Reach component feels similar to styling any native element. There are

# Including Base Styles

Reach UI uses stylesheets for the components' base styles. You must include these styles in your app for the components to work properly
Reach UI uses stylesheets for the components' base styles. You must include these styles in your app for the components to work properly.

## Automatically Including Styles

A webpack plugin is in development that will automatically bundle the styles so you don't have to.

## Skip including styles

Normally, you'll receive a warning when you forget to include the matching CSS file. If you're implementing all styles yourself, you can disable this warning by setting a root CSS variable matching the package name to 1.

**Please tread carefully** - in most cases, the styles you import are better to override than remove completely.

Here's an example:

```css
:root {
--reach-dialog: 1;
}
```

## Using a Bundler (webpack, parcel, etc.)

If you are using a module bundler like webpack or parcel, you can import them where you import the component.
Expand Down Expand Up @@ -88,6 +102,7 @@ let YourMenuList = styled(MenuList)`
<MenuList css={absolutely}/>
```


## CSS Selectors

Because Reach UI uses regular stylesheets for its own styles you can override them like any other element. All styles use the lowest possible "specificity score", so as long as you include the component styles before your own app styles you should not run into any specificity problems.
Expand Down

0 comments on commit b904555

Please sign in to comment.