Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add note about removing CSS warning #245

Merged
merged 3 commits into from
Aug 12, 2019
Merged

Add note about removing CSS warning #245

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f4f4c1
Add note about removing CSS warning
selbekk Jul 30, 2019
2e5ad86
Remove unneeded white space
selbekk Jul 31, 2019
2fd918b
Move usage warning above the example
selbekk Jul 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
17 changes: 16 additions & 1 deletion www/src/pages/styling.mdx
View file
Open in desktop
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}/>
```


selbekk marked this conversation as resolved.
Show resolved Hide resolved
## 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