diff --git a/www/src/pages/styling.mdx b/www/src/pages/styling.mdx index 5d65e986e..6aad2dca4 100644 --- a/www/src/pages/styling.mdx +++ b/www/src/pages/styling.mdx @@ -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. @@ -88,6 +102,7 @@ let YourMenuList = styled(MenuList)` ``` + ## 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.