From 0f4f4c1defff94ffceafb80a80dd7f0e2476d8b0 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 2e5ad86a7d67edb7d3c8257ffd3db557e86a0088 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 2fd918b291f4f9078da770cfc01480dd45e3830d 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.