From 695cb3fb5f771492424e3fdfd71ff040e1e93a82 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 28 Jan 2020 14:05:20 +0100 Subject: [PATCH] [docs] Improve Style Library Interoperability --- .../pages/customization/palette/DarkTheme.js | 2 + .../guides/interoperability/EmotionCSS.js | 20 +- .../guides/interoperability/EmotionCSS.tsx | 20 +- .../guides/interoperability/EmotionTheme.js | 45 ++ .../guides/interoperability/EmotionTheme.tsx | 45 ++ .../interoperability/StyledComponents.js | 20 +- .../interoperability/StyledComponents.tsx | 20 +- .../interoperability/StyledComponentsDeep.js | 23 +- .../interoperability/StyledComponentsDeep.tsx | 23 +- .../interoperability/StyledComponentsTheme.js | 64 ++- .../StyledComponentsTheme.tsx | 64 ++- .../interoperability/interoperability.md | 405 ++++++++++++++---- 12 files changed, 513 insertions(+), 238 deletions(-) create mode 100644 docs/src/pages/guides/interoperability/EmotionTheme.js create mode 100644 docs/src/pages/guides/interoperability/EmotionTheme.tsx diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js index 8d0bf985195548..378264521113f9 100644 --- a/docs/src/pages/customization/palette/DarkTheme.js +++ b/docs/src/pages/customization/palette/DarkTheme.js @@ -93,6 +93,8 @@ const darkTheme = createMuiTheme({ }); export default function DarkTheme() { + // Note that if you intend to use two or more themes at the same time on your site, + // you need to wrap them with a single ThemeProvider at the root (not like in this example). return (
diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js index ee4cb9dae966db..4b09485b7163b3 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.js +++ b/docs/src/pages/guides/interoperability/EmotionCSS.js @@ -5,23 +5,19 @@ import Button from '@material-ui/core/Button'; export default function EmotionCSS() { return (
- +
); diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx index ee4cb9dae966db..4b09485b7163b3 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx +++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx @@ -5,23 +5,19 @@ import Button from '@material-ui/core/Button'; export default function EmotionCSS() { return (
- +
); diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js new file mode 100644 index 00000000000000..5b2df294f7b96b --- /dev/null +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -0,0 +1,45 @@ +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; +import Button from '@material-ui/core/Button'; +import { ThemeProvider } from 'emotion-theming'; +import { + createMuiTheme, + ThemeProvider as MuiThemeProvider, + darken, +} from '@material-ui/core/styles'; + +const customTheme = createMuiTheme({ + palette: { + primary: { + main: '#6772e5', + }, + }, +}); + +export default function EmotionTheme() { + return ( + + + + + + + ); +} diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx new file mode 100644 index 00000000000000..5b2df294f7b96b --- /dev/null +++ b/docs/src/pages/guides/interoperability/EmotionTheme.tsx @@ -0,0 +1,45 @@ +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; +import Button from '@material-ui/core/Button'; +import { ThemeProvider } from 'emotion-theming'; +import { + createMuiTheme, + ThemeProvider as MuiThemeProvider, + darken, +} from '@material-ui/core/styles'; + +const customTheme = createMuiTheme({ + palette: { + primary: { + main: '#6772e5', + }, + }, +}); + +export default function EmotionTheme() { + return ( + + + + + + + ); +} diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js index 305269d485d508..75ccbfe5b9160b 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.js +++ b/docs/src/pages/guides/interoperability/StyledComponents.js @@ -4,22 +4,20 @@ import Button from '@material-ui/core/Button'; import NoSsr from '@material-ui/core/NoSsr'; const StyledButton = styled(Button)` - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } `; export default function StyledComponents() { return ( -
- - Styled Components -
+ + Customized ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx index 305269d485d508..75ccbfe5b9160b 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponents.tsx @@ -4,22 +4,20 @@ import Button from '@material-ui/core/Button'; import NoSsr from '@material-ui/core/NoSsr'; const StyledButton = styled(Button)` - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } `; export default function StyledComponents() { return ( -
- - Styled Components -
+ + Customized ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index 2b5df4a3fac2ed..67637c8da73f0e 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -3,26 +3,23 @@ import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import NoSsr from '@material-ui/core/NoSsr'; -const StyledButton = styled(({ color, ...other }) => - Styled Components -
+ + Customized ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index 2b5df4a3fac2ed..67637c8da73f0e 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -3,26 +3,23 @@ import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import NoSsr from '@material-ui/core/NoSsr'; -const StyledButton = styled(({ color, ...other }) => - Styled Components - + + Customized ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index b417f5c2fbb009..562b4ef9c31590 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -1,47 +1,34 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme, darken, fade } from '@material-ui/core/styles'; +import { + createMuiTheme, + ThemeProvider as MuiThemeProvider, + darken, +} from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; -const defaultTheme = createMuiTheme(); +const customTheme = createMuiTheme({ + palette: { + primary: { + main: '#6772e5', + }, + }, +}); -const StyledButton = styled.button` +const StyledButton = styled(Button)` ${({ theme }) => ` - padding: 8px 12px; - border: 1px solid; - cursor: pointer; - outline: 0; - border-radius: ${theme.shape.borderRadius}px; - color: ${theme.palette.primary.contrastText}; background-color: ${theme.palette.primary.main}; - border-color: ${theme.palette.primary.main}; - transition: ${theme.transitions.create(['background-color', 'box-shadow'])}; - font-family: ${[ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(',')}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; &:hover { - background-color: ${darken(theme.palette.primary.main, 0.1)}; - border-color: ${darken(theme.palette.primary.main, 0.2)}; - } - &:active { background-color: ${darken(theme.palette.primary.main, 0.2)}; - border-color: ${darken(theme.palette.primary.main, 0.3)}; - } - &:focus { - box-shadow: 0 0 0 0.2rem ${fade(theme.palette.primary.main, 0.5)}; } - font-size: 18px; - ${theme.breakpoints.up('md')} { - font-size: 16px; + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; } `} `; @@ -49,9 +36,12 @@ const StyledButton = styled.button` export default function StyledComponentsTheme() { return ( - - Styled Components - + + + + Customized + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index b417f5c2fbb009..562b4ef9c31590 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -1,47 +1,34 @@ import React from 'react'; import styled, { ThemeProvider } from 'styled-components'; import NoSsr from '@material-ui/core/NoSsr'; -import { createMuiTheme, darken, fade } from '@material-ui/core/styles'; +import { + createMuiTheme, + ThemeProvider as MuiThemeProvider, + darken, +} from '@material-ui/core/styles'; +import Button from '@material-ui/core/Button'; -const defaultTheme = createMuiTheme(); +const customTheme = createMuiTheme({ + palette: { + primary: { + main: '#6772e5', + }, + }, +}); -const StyledButton = styled.button` +const StyledButton = styled(Button)` ${({ theme }) => ` - padding: 8px 12px; - border: 1px solid; - cursor: pointer; - outline: 0; - border-radius: ${theme.shape.borderRadius}px; - color: ${theme.palette.primary.contrastText}; background-color: ${theme.palette.primary.main}; - border-color: ${theme.palette.primary.main}; - transition: ${theme.transitions.create(['background-color', 'box-shadow'])}; - font-family: ${[ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(',')}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; &:hover { - background-color: ${darken(theme.palette.primary.main, 0.1)}; - border-color: ${darken(theme.palette.primary.main, 0.2)}; - } - &:active { background-color: ${darken(theme.palette.primary.main, 0.2)}; - border-color: ${darken(theme.palette.primary.main, 0.3)}; - } - &:focus { - box-shadow: 0 0 0 0.2rem ${fade(theme.palette.primary.main, 0.5)}; } - font-size: 18px; - ${theme.breakpoints.up('md')} { - font-size: 16px; + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; } `} `; @@ -49,9 +36,12 @@ const StyledButton = styled.button` export default function StyledComponentsTheme() { return ( - - Styled Components - + + + + Customized + + ); } diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 825a8043919ee3..57ed510fea0c6e 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -1,6 +1,6 @@ # Style Library Interoperability -

While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.

+

While you can use the JSS based styling solution provided by Material-UI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. @@ -17,16 +17,20 @@ There are examples for the following styling solutions: Nothing fancy, plain old CSS. +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) + **PlainCssButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -38,32 +42,89 @@ import Button from '@material-ui/core/Button'; export default function PlainCssButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/l5qv4y57vl) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Deeper elements + +If you attempt to style a Drawer with variant permanent, +you will likely need to affect the Drawer's child paper element. +However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. +You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. + +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. + +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +**PlainCssButtonDeep.css** +```css +.button { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; +} +.button-label { + color: #fff; +} +``` + +**PlainCssButtonDeep.js** + +```jsx +import React from 'react'; +import Button from '@material-ui/core/Button'; + +export default function PlainCssButtonDeep() { + return ( +
+ + +
+ ); +} +``` ## Global CSS Explicitly providing the class names to the component is too much effort? [You can target the class names generated by Material-UI](/styles/advanced/#with-material-ui-core). +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-css-bir9e) + **GlobalCssButton.css** ```css .MuiButton-root { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.MuiButton-root:hover { + background-color: #5469d4; +} +.MuiButton-label { + color: #fff; } ``` @@ -73,17 +134,22 @@ import React from 'react'; import Button from '@material-ui/core/Button'; export default function GlobalCssButton() { - return ( -
- -
- ); + return ; } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9yxopv4vmp) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` ## Styled Components @@ -92,11 +158,37 @@ export default function GlobalCssButton() { The `styled()` method works perfectly on all of the components. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "defaultCodeOpen": true}} +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) + +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } +`; + +export default function StyledComponents() { + return ( +
+ + Customized +
+ ); +} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/k553lz1qrv) +``` -### Controlling Priority +### Controlling priority ⚠️ **Note:** Both styled-components and JSS inject their styles at the bottom of the ``. The best approach to ensuring styled-components styles are loaded last is to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: @@ -106,7 +198,7 @@ import { StylesProvider } from '@material-ui/core/styles'; {/* Your component tree. - Styled components can override Material-UI's styles. */} + Now, you can override Material-UI's styles. */} ``` @@ -119,9 +211,37 @@ you will likely need to affect the Drawer's child paper element. However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. -The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. +It also works around [this styled-components issue](https://github.com/styled-components/styled-components/issues/439) by "consuming" properties that should not be passed on to the underlying component. + +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} -{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "defaultCodeOpen": true}} +```jsx +import React from 'react'; +import styled from 'styled-components'; +import Button from '@material-ui/core/Button'; + +const StyledButton = styled(Button)` + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; + &:hover { + background-color: #5469d4; + } + & .MuiButton-label { + color: #fff; + } +`; + +export default function StyledComponentsDeep() { + return ( +
+ + Customized +
+ ); +} +``` The above demo relies on the [default `classes` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.label`. @@ -133,33 +253,53 @@ import Button from '@material-ui/core/Button'; const StyledButton = styled(({ color, ...other }) => ( - Styled Components + + Customized ); } ``` -### ThemeProvider +### Theme Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. +We encourage to share the same theme object between Material-UI and your styles. + +```jsx +const StyledButton = styled(Button)` + ${({ theme }) => ` + background-color: ${theme.palette.primary.main}; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 4px 10px; + font-size: 13px; + &:hover { + background-color: ${darken(theme.palette.primary.main, 0.2)}; + } + ${theme.breakpoints.up('sm')} { + font-size: 14px; + padding: 7px 14px; + } + `} +`; +``` + {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} ### Portals @@ -199,16 +339,20 @@ const StyledMenu = styled(({ className, ...props }) => ( It's hard to know the market share of [this styling solution](https://github.com/css-modules/css-modules) as it's dependent on the bundling solution people are using. +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) + **CssModulesButton.css** ```css .button { - background: linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%); - border-radius: 3px; - border: 0; - color: white; - height: 48px; - padding: 0 30px; - box-shadow: 0 3px 5px 2px rgba(255, 105, 135, .3); + background-color: #6772e5; + color: #fff; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.button:hover { + background-color: #5469d4; } ``` @@ -222,76 +366,153 @@ import Button from '@material-ui/core/Button'; export default function CssModulesButton() { return (
- - + +
); } ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/5km241l9xn) +### Controlling priority ⚠️ -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: -## Emotion +```jsx +import { StylesProvider } from '@material-ui/core/styles'; -![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) -![npm](https://img.shields.io/npm/dm/emotion.svg?) + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` -### The `css` prop +### Deeper elements -Emotion's **css()** method works seamlessly with Material-UI. +If you attempt to style a Drawer with variant permanent, +you will likely need to affect the Drawer's child paper element. +However, the paper is not the root element of Drawer and therefore styled-components customization as above will not work. +You need to use the [`classes`](/styles/advanced/#overriding-styles-classes-prop) API of Material-UI. -{{"demo": "pages/guides/interoperability/EmotionCSS.js", "defaultCodeOpen": true}} +The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/yw93kl7y0j) +{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideHeader": true}} -**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo. +**CssModulesButtonDeep.css** +```css +.root { + background-color: #6772e5; + box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); + padding: 7px 14px; +} +.root:hover { + background-color: #5469d4; +} +.label { + color: #fff; +} +``` -### The `styled()` API +**CssModulesButtonDeep.js** -It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). +```jsx +import React from 'react'; +// webpack, parcel or else will inject the CSS into the page +import styles from './CssModulesButtonDeep.css'; +import Button from '@material-ui/core/Button'; + +export default function CssModulesButtonDeep() { + return ( +
+ + +
+ ); +} +``` + +## Emotion + +![stars](https://img.shields.io/github/stars/emotion-js/emotion.svg?style=social&label=Star) +![npm](https://img.shields.io/npm/dm/emotion.svg?) -## React JSS +### The `css` prop -![stars](https://img.shields.io/github/stars/cssinjs/jss.svg?style=social&label=Star) -![npm](https://img.shields.io/npm/dm/react-jss.svg?) +Emotion's **css()** method works seamlessly with Material-UI. -Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). -A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss. +{{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideHeader": true}} + +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) ```jsx -import React from 'react'; -import PropTypes from 'prop-types'; -import injectSheet from 'react-jss'; +/** @jsx jsx */ +import { jsx, css } from '@emotion/core'; import Button from '@material-ui/core/Button'; -const styles = { - button: { - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', - }, -}; - -function ReactJssButton(props) { +export default function EmotionCSS() { return (
- - + +
); } +``` + +### Controlling priority ⚠️ + +**Note:** JSS injects its styles at the bottom of the ``. If you don't want to mark style attributes with **!important**, you need to change [the CSS injection order](/styles/advanced/#css-injection-order), as in the demo: + +```jsx +import { StylesProvider } from '@material-ui/core/styles'; + + + {/* Your component tree. + Now, you can override Material-UI's styles. */} + +``` + +### Theme + +Material-UI has a rich theme structure that you can leverage for +the color manipulations, the transitions, the media queries, and more. -ReactJssButton.propTypes = { - classes: PropTypes.object.isRequired, -}; +We encourage to share the same theme object between Material-UI and your styles. -export default injectSheet(styles)(ReactJssButton); +```jsx + ``` -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/24kllqxvmp) +{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} + +### The `styled()` API + +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components).