From f06172b08173016c26e4a269abc299845a96be9d Mon Sep 17 00:00:00 2001 From: Kristofer Selbekk Date: Tue, 30 Jul 2019 21:17:48 +0200 Subject: [PATCH 1/3] Add note about removing CSS warning This commit adds a note about how you can remove the warning of a missing CSS file, if you want to implement the required styles yourself. --- www/src/pages/styling.mdx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/www/src/pages/styling.mdx b/www/src/pages/styling.mdx index 5d65e986e..3fe5c425c 100644 --- a/www/src/pages/styling.mdx +++ b/www/src/pages/styling.mdx @@ -19,12 +19,24 @@ 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. Here's an example: + +```css +:root { + --reach-dialog: 1; +} +``` + +Note that you should tread carefully - in most cases, the styles you import are better to override than remove completely. + ## 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 +100,8 @@ 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. From 76a45cef1472a6f7dd1e65c12947cc52f559719e Mon Sep 17 00:00:00 2001 From: Kristofer Selbekk Date: Wed, 31 Jul 2019 21:41:56 +0200 Subject: [PATCH 2/3] Remove unneeded white space --- www/src/pages/styling.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/www/src/pages/styling.mdx b/www/src/pages/styling.mdx index 3fe5c425c..fc44cae6e 100644 --- a/www/src/pages/styling.mdx +++ b/www/src/pages/styling.mdx @@ -101,7 +101,6 @@ 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. From 3ea9a69e8d009d20593e4fbdb262d3549d89c40e Mon Sep 17 00:00:00 2001 From: Kristofer Selbekk Date: Wed, 31 Jul 2019 21:43:55 +0200 Subject: [PATCH 3/3] Move usage warning above the example --- www/src/pages/styling.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/www/src/pages/styling.mdx b/www/src/pages/styling.mdx index fc44cae6e..6aad2dca4 100644 --- a/www/src/pages/styling.mdx +++ b/www/src/pages/styling.mdx @@ -27,7 +27,11 @@ A webpack plugin is in development that will automatically bundle the styles so ## 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. Here's an example: +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 { @@ -35,8 +39,6 @@ Normally, you'll receive a warning when you forget to include the matching CSS f } ``` -Note that you should tread carefully - in most cases, the styles you import are better to override than remove completely. - ## 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.