From fd5714f0425bdc700aa50bcac5d5e20a6b062980 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 12 Oct 2020 17:17:34 +0200 Subject: [PATCH 01/96] wip --- .../interoperability/interoperability.md | 81 +++++++++++-------- 1 file changed, 47 insertions(+), 34 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 5007f7a4516cb9..1c20a11ac26ac9 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 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).

+

While you can use the emotion 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 principles applied here can be adapted to other libraries. @@ -18,7 +18,7 @@ Nothing fancy, just plain CSS. {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-1k9wb) **PlainCssButton.css** @@ -50,64 +50,77 @@ export default function PlainCssButton() { ); } ``` - ### 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:** Most of the CSS-in-JS solutions inject their 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, as in the demo: ```jsx -import { StylesProvider } from '@material-ui/core/styles'; +import * as React from 'react'; +import { CacheProvider } from "@emotion/core"; +import createCache from "@emotion/cache"; -{/* Your component tree. - Now, you can override Material-UI's styles. */}; +const head = document.getElementsByTagName("head")[0]; + +const emotionContainer = head.insertBefore( + document.createElement("STYLE"), + head.firstChild +); + +const cache = createCache({ + container: emotionContainer +}); + +export default function PlainCSSButton() { + return ( + + {/* 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. +If you attempt to style the Slider, +you will likely need to affect some of the Slider's child elements, for example the thumb. +However, the rhumb is not the root element of Slider and therefore styled-components customization as above will not work. +You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. -The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. +The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} -**PlainCssButtonDeep.css** +**PlainCssSliderDeep.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; +.slider { + color: #20b2aa; } -.button:hover { - background-color: #5469d4; +.slider:hover { + color: #2e8b57; } -.button-label { - color: #fff; + +.slider .thumb { + border-radius: 30%; } ``` **PlainCssButtonDeep.js** ```jsx -import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import './PlainCssButtonDeep.css'; +import * as React from "react"; +import Slider from "@material-ui/lab/SliderStyled"; +import "./PlainCssSliderDeep.css"; -export default function PlainCssButtonDeep() { +export default function PlainCSSSlider() { return (
- - + +
); } From 6188a3a8f08b27bb59082f3c43fe313ecbbb0778 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Oct 2020 11:48:31 +0200 Subject: [PATCH 02/96] styled-components, emotion, global --- .../guides/interoperability/EmotionCSS.js | 26 +- .../guides/interoperability/EmotionCSS.tsx | 26 +- .../guides/interoperability/EmotionTheme.js | 33 +-- .../guides/interoperability/EmotionTheme.tsx | 33 +-- .../interoperability/StyledComponents.js | 25 +- .../interoperability/StyledComponents.tsx | 25 +- .../interoperability/StyledComponentsDeep.js | 30 +- .../interoperability/StyledComponentsDeep.tsx | 29 +- .../interoperability/StyledComponentsTheme.js | 35 +-- .../StyledComponentsTheme.tsx | 38 +-- .../interoperability/interoperability.md | 265 +++++++----------- 11 files changed, 218 insertions(+), 347 deletions(-) diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js index 009702fe08da24..85a1b3be730a4a 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.js +++ b/docs/src/pages/guides/interoperability/EmotionCSS.js @@ -1,25 +1,21 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; export default function EmotionCSS() { return ( -
- - -
+ /> + ); } diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx index 009702fe08da24..85a1b3be730a4a 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx +++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx @@ -1,25 +1,21 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; export default function EmotionCSS() { return ( -
- - -
+ /> + ); } diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js index afaea5beee6469..7aace9692b2697 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -1,17 +1,17 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; -import { ThemeProvider } from 'emotion-theming'; +import Slider from '@material-ui/lab/SliderStyled'; import { createMuiTheme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ palette: { primary: { - main: '#6772e5', + main: '#20b2aa', }, }, }); @@ -19,28 +19,17 @@ const customTheme = createMuiTheme({ export default function EmotionTheme() { return ( - - - - + /> + ); } diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx index afaea5beee6469..7aace9692b2697 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.tsx +++ b/docs/src/pages/guides/interoperability/EmotionTheme.tsx @@ -1,17 +1,17 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; -import { ThemeProvider } from 'emotion-theming'; +import Slider from '@material-ui/lab/SliderStyled'; import { createMuiTheme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ palette: { primary: { - main: '#6772e5', + main: '#20b2aa', }, }, }); @@ -19,28 +19,17 @@ const customTheme = createMuiTheme({ export default function EmotionTheme() { return ( - - - - + /> + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js index b830f0800b97d6..eefb5b5f94229d 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.js +++ b/docs/src/pages/guides/interoperability/StyledComponents.js @@ -1,23 +1,20 @@ import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; -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; +const SliderCustomized = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } `; export default function StyledComponents() { return ( - - - Customized - + + + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx index b830f0800b97d6..eefb5b5f94229d 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponents.tsx @@ -1,23 +1,20 @@ import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; -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; +const SliderCustomized = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } `; export default function StyledComponents() { return ( - - - Customized - + + + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index 12dbea9960e042..d96e0240634543 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -1,25 +1,23 @@ import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; -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; +const SliderCustomized = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } - & .MuiButton-label { - color: #fff; + & .MuiSlider-thumb { + border-radius: 30%; } `; -export default function StyledComponentsDeep() { +export default function StyledComponents() { return ( - - - Customized - + + + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index 12dbea9960e042..74ba8fbdd0e32a 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -1,25 +1,22 @@ import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; -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; +const SliderCustomized = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } - & .MuiButton-label { - color: #fff; + & .MuiSlider-thumb { + border-radius: 30%; } `; -export default function StyledComponentsDeep() { +export default function StyledComponents() { return ( - - - Customized - +
+ + +
); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 05bd366b31e79d..2fbaf5fb972b39 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -1,47 +1,34 @@ import * as React from 'react'; -import styled, { ThemeProvider } from 'styled-components'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; const customTheme = createMuiTheme({ palette: { primary: { - main: '#6772e5', + main: '#20b2aa', }, }, }); -const StyledButton = styled(Button)` +const CustomizedSlider = styled(Slider)` ${({ 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; + color: ${theme.palette.primary.main}; + :hover { + color: ${darken(theme.palette.primary.main, 0.2)}; } `} `; export default function StyledComponentsTheme() { return ( - - - - - Customized - - - + + + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 05bd366b31e79d..c5d649a7919d7c 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -1,47 +1,37 @@ import * as React from 'react'; -import styled, { ThemeProvider } from 'styled-components'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, + Theme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ palette: { primary: { - main: '#6772e5', + main: '#20b2aa', }, }, }); -const StyledButton = styled(Button)` +const CustomizedSlider = styled(Slider)` ${({ 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; + color: ${theme.palette.primary.main}; + :hover { + color: ${darken(theme.palette.primary.main, 0.2)}; } `} `; export default function StyledComponentsTheme() { return ( - - - - - Customized - - - + + + + + ); } diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 1c20a11ac26ac9..c56151e1793fd3 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -20,32 +20,29 @@ Nothing fancy, just plain CSS. [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-1k9wb) -**PlainCssButton.css** +**PlainCssSlider.css** ```css -.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; +.slider { + color: #20b2aa; } -.button:hover { - background-color: #5469d4; +.slider:hover { + color: #2e8b57; } ``` -**PlainCssButton.js** +**PlainCssSlider.js** ```jsx import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import './PlainCssButton.css'; +import Slider from "@material-ui/lab/SliderStyled"; +import './PlainCssSlider.css'; -export default function PlainCssButton() { +export default function PlainCSSSlider() { return (
- - + +
); } @@ -70,7 +67,7 @@ const cache = createCache({ container: emotionContainer }); -export default function PlainCSSButton() { +export default function App() { return ( {/* Your component tree. Now you can override Material-UI's styles. */} @@ -83,12 +80,12 @@ export default function PlainCSSButton() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -However, the rhumb is not the root element of Slider and therefore styled-components customization as above will not work. +However, the thumb is not the root element of Slider and therefore customization as above will not work. You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideToolbar": true}} **PlainCssSliderDeep.css** @@ -99,13 +96,12 @@ The following example overrides the `thumb` style of `Slider` in addition to the .slider:hover { color: #2e8b57; } - .slider .thumb { border-radius: 30%; } ``` -**PlainCssButtonDeep.js** +**PlainCssSliderDeep.js** ```jsx import * as React from "react"; @@ -131,21 +127,19 @@ export default function PlainCSSSlider() { 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) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-classnames-mc4wl) -**GlobalCssButton.css** +**GlobalCssSlider.css** ```css -.MuiButton-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; +.MuiSlider-root { + color: #20b2aa; } -.MuiButton-root:hover { - background-color: #5469d4; +.MuiSlider-root:hover { + color: #2e8b57; } -.MuiButton-label { - color: #fff; +.MuiSlider-root .MuiSlider-thumb { + border-radius: 30%; } ``` @@ -153,140 +147,106 @@ Explicitly providing the class names to the component is too much effort? ```jsx import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import './GlobalCssButton.css'; +import Slider from "@material-ui/lab/SliderStyled"; +import './GlobalCssSlider.css'; -export default function GlobalCssButton() { - return ; +export default function GlobalCSSSlider() { + 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. */}; -``` - ## Styled Components ![stars](https://img.shields.io/github/stars/styled-components/styled-components.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/styled-components.svg?) -The `styled()` method works perfectly on all of the components. +By default the Material-UI components, comes with emotion as their style engine. However, +if you would like to use `styled-components`, you can configure it, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). + +After the style engine is configured properly, you can use the `experimentalStyled()` utility +from `@material-ui/core/styles` and have direct access to the theme. {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-6bwu7) ```jsx -import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; +import * as React from "react"; +import Slider from "@material-ui/lab/SliderStyled"; +import { experimentalStyled as styled } from "@material-ui/core/styles"; -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; +const CustomizedSlider = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } `; -export default function StyledComponents() { - return ( -
- - Customized -
- ); +export default function App() { + return ; } ``` -### 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: - -```jsx -import { StylesProvider } from '@material-ui/core/styles'; - -{/* Your component tree. - Now, you can override Material-UI's styles. */}; -``` - -Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. Avoid the usage of `!important`. - ### 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 Material-UI [`classes`](/styles/advanced/#overriding-styles-classes-prop) API. +If you attempt to style the Slider, +you will likely need to affect some of the Slider's child elements, for example the thumb. +However, the thumb is not the root element of Slider and therefore styled-components customization as above will not work. +You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. -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" props that should not be passed on to the underlying component. +The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. {{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} ```jsx -import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; +import * as React from "react"; +import Slider from "@material-ui/lab/SliderStyled"; +import { experimentalStyled as styled } from "@material-ui/core/styles"; -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; +const CustomizedSliderDeep = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } - & .MuiButton-label { - color: #fff; + & .MuiSlider-thumb { + border-radius: 30%; } `; -export default function StyledComponentsDeep() { +export default function App() { 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`. +The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.thumb`. ```jsx -import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; +import * as React from "react"; +import { experimentalStyled as styled } from "@material-ui/core/styles"; +import Slider from "@material-ui/lab/SliderStyled"; -const StyledButton = styled(({ color, ...other }) => ( - - Customized + Default + Customized ); } @@ -297,25 +257,21 @@ export default function StyledComponentsDeep() { Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. +By using the Material-UI's Provider, the theme will be available for the +context as well (emotion or styled-components, depending on your configuraiton). + 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; - } + css` + color: ${theme.palette.primary.main}; + :hover { + color: ${darken(theme.palette.primary.main, 0.2)}; + } `} -`; +/> ``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} @@ -465,67 +421,46 @@ Emotion's **css()** method works seamlessly with Material-UI. ```jsx /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; 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. +By using the Material-UI's Provider, the theme will be available for the +context as well (emotion or styled-components, depending on your configuraiton). + We encourage to share the same theme object between Material-UI and your styles. ```jsx - +/> ``` {{"demo": "pages/guides/interoperability/EmotionTheme.js"}} From 4f285992df75f197ccb0c7fe230998939887b3be Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Oct 2020 11:54:19 +0200 Subject: [PATCH 03/96] prettier --- .../StyledComponentsTheme.tsx | 1 - .../interoperability/interoperability.md | 45 ++++++++++--------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index c5d649a7919d7c..35d58ddb10f932 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, - Theme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index c56151e1793fd3..b84744f29dc27c 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -35,7 +35,7 @@ Nothing fancy, just plain CSS. ```jsx import * as React from 'react'; -import Slider from "@material-ui/lab/SliderStyled"; +import Slider from '@material-ui/lab/SliderStyled'; import './PlainCssSlider.css'; export default function PlainCSSSlider() { @@ -47,24 +47,25 @@ export default function PlainCSSSlider() { ); } ``` + ### Controlling priority ⚠️ **Note:** Most of the CSS-in-JS solutions inject their 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, as in the demo: ```jsx import * as React from 'react'; -import { CacheProvider } from "@emotion/core"; -import createCache from "@emotion/cache"; +import { CacheProvider } from '@emotion/core'; +import createCache from '@emotion/cache'; -const head = document.getElementsByTagName("head")[0]; +const head = document.getElementsByTagName('head')[0]; const emotionContainer = head.insertBefore( - document.createElement("STYLE"), - head.firstChild + document.createElement('STYLE'), + head.firstChild, ); const cache = createCache({ - container: emotionContainer + container: emotionContainer, }); export default function App() { @@ -104,9 +105,9 @@ The following example overrides the `thumb` style of `Slider` in addition to the **PlainCssSliderDeep.js** ```jsx -import * as React from "react"; -import Slider from "@material-ui/lab/SliderStyled"; -import "./PlainCssSliderDeep.css"; +import * as React from 'react'; +import Slider from '@material-ui/lab/SliderStyled'; +import './PlainCssSliderDeep.css'; export default function PlainCSSSlider() { return ( @@ -115,7 +116,7 @@ export default function PlainCSSSlider() { ); @@ -147,7 +148,7 @@ Explicitly providing the class names to the component is too much effort? ```jsx import * as React from 'react'; -import Slider from "@material-ui/lab/SliderStyled"; +import Slider from '@material-ui/lab/SliderStyled'; import './GlobalCssSlider.css'; export default function GlobalCSSSlider() { @@ -171,9 +172,9 @@ from `@material-ui/core/styles` and have direct access to the theme. [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-6bwu7) ```jsx -import * as React from "react"; -import Slider from "@material-ui/lab/SliderStyled"; -import { experimentalStyled as styled } from "@material-ui/core/styles"; +import * as React from 'react'; +import Slider from '@material-ui/lab/SliderStyled'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; const CustomizedSlider = styled(Slider)` color: #20b2aa; @@ -199,9 +200,9 @@ The following example overrides the `thumb` style of `Slider` in addition to the {{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} ```jsx -import * as React from "react"; -import Slider from "@material-ui/lab/SliderStyled"; -import { experimentalStyled as styled } from "@material-ui/core/styles"; +import * as React from 'react'; +import Slider from '@material-ui/lab/SliderStyled'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; const CustomizedSliderDeep = styled(Slider)` color: #20b2aa; @@ -226,12 +227,12 @@ export default function App() { The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.thumb`. ```jsx -import * as React from "react"; -import { experimentalStyled as styled } from "@material-ui/core/styles"; -import Slider from "@material-ui/lab/SliderStyled"; +import * as React from 'react'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; const StyledSlider = styled((props) => ( - + ))` color: #20b2aa; :hover { From 6f9816f000c8fc563c9aa7cc7f3736cfe6c6723e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Oct 2020 13:41:53 +0200 Subject: [PATCH 04/96] css modules updated --- .../interoperability/StyledComponentsDeep.tsx | 5 +- .../interoperability/StyledComponentsTheme.js | 6 +- .../interoperability/interoperability.md | 116 ++++++++++-------- 3 files changed, 73 insertions(+), 54 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index 74ba8fbdd0e32a..d96e0240634543 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` color: #20b2aa; @@ -14,9 +15,9 @@ const SliderCustomized = styled(Slider)` export default function StyledComponents() { return ( -
+ -
+ ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 2fbaf5fb972b39..35d58ddb10f932 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -6,6 +6,7 @@ import { darken, } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ palette: { @@ -27,8 +28,9 @@ const CustomizedSlider = styled(Slider)` export default function StyledComponentsTheme() { return ( - - + + + ); } diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index b84744f29dc27c..c72308c2667498 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -162,7 +162,7 @@ export default function GlobalCSSSlider() { ![npm](https://img.shields.io/npm/dm/styled-components.svg?) By default the Material-UI components, comes with emotion as their style engine. However, -if you would like to use `styled-components`, you can configure it, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). +if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). After the style engine is configured properly, you can use the `experimentalStyled()` utility from `@material-ui/core/styles` and have direct access to the theme. @@ -264,15 +264,14 @@ context as well (emotion or styled-components, depending on your configuraiton). We encourage to share the same theme object between Material-UI and your styles. ```jsx - css` - color: ${theme.palette.primary.main}; - :hover { - color: ${darken(theme.palette.primary.main, 0.2)}; - } +const CustomizedSlider = styled(Slider)` + ${({ theme }) => ` + color: ${theme.palette.primary.main}; + :hover { + color: ${darken(theme.palette.primary.main, 0.2)}; + } `} -/> +`; ``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} @@ -316,35 +315,32 @@ bundling solution people are using. {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-pkm9l) -**CssModulesButton.css** +**CssModulesSlider.module.css** ```css -.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; +.slider { + color: #20b2aa; } -.button:hover { - background-color: #5469d4; +.slider:hover { + color: #2e8b57; } ``` **CssModulesButton.js** ```jsx -import * as React from 'react'; +import React from 'react'; // webpack, parcel or else will inject the CSS into the page -import styles from './CssModulesButton.css'; -import Button from '@material-ui/core/Button'; +import styles from './CssModulesSlider.module.css'; +import Slider from '@material-ui/lab/SliderStyled'; -export default function CssModulesButton() { +export default function PlainCSSSlider() { return (
- - + +
); } @@ -352,55 +348,75 @@ export default function CssModulesButton() { ### 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:** Most of the CSS-in-JS solutions inject their 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, as in the demo: ```jsx -import { StylesProvider } from '@material-ui/core/styles'; +import * as React from 'react'; +import { CacheProvider } from '@emotion/core'; +import createCache from '@emotion/cache'; + +const head = document.getElementsByTagName('head')[0]; + +const emotionContainer = head.insertBefore( + document.createElement('STYLE'), + head.firstChild, +); -{/* Your component tree. - Now, you can override Material-UI's styles. */}; +const cache = createCache({ + container: emotionContainer, +}); + +export default function App() { + return ( + + {/* 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. +If you attempt to style the Slider, +you will likely need to affect some of the Slider's child elements, for example the thumb. +However, the thumb is not the root element of Slider and therefore customization as above will not work. +You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. -The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. +The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideToolbar": true}} -**CssModulesButtonDeep.css** +**CssModulesSliderDeep.module.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; +.slider { + color: #20b2aa; } -.root:hover { - background-color: #5469d4; +.slider:hover { + color: #2e8b57; } -.label { - color: #fff; +.slider .thumb { + border-radius: 30%; } ``` -**CssModulesButtonDeep.js** +**CssModulesSliderDeep.js** ```jsx -import * as React from 'react'; +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'; +import styles from './CssModulesSliderDeep.module.css'; +import Slider from '@material-ui/lab/SliderStyled'; -export default function CssModulesButtonDeep() { +export default function PlainCSSSlider() { return (
- - + +
); } From 07c75015ba9d160bea4aed4d3b905558d0b7e2dd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Oct 2020 15:03:54 +0200 Subject: [PATCH 05/96] fixed duplicated import --- docs/src/pages/guides/interoperability/StyledComponentsTheme.js | 2 +- .../src/pages/guides/interoperability/StyledComponentsTheme.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 35d58ddb10f932..8d2bbf37162df6 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, + experimentalStyled as styled, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 35d58ddb10f932..8d2bbf37162df6 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, + experimentalStyled as styled, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; From cf7f2efb910d3eab6b1cab392fa400e42df97a97 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:05:52 +0200 Subject: [PATCH 06/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index c72308c2667498..1744aa3dcbb4da 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -109,7 +109,7 @@ import * as React from 'react'; import Slider from '@material-ui/lab/SliderStyled'; import './PlainCssSliderDeep.css'; -export default function PlainCSSSlider() { +export default function PlainCssSliderDeep() { return (
From a327bb092343659f1bdf5e4c333d542a8f22289d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:06:18 +0200 Subject: [PATCH 07/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 1744aa3dcbb4da..2cdf0ca36f10b6 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -408,7 +408,7 @@ import React from 'react'; import styles from './CssModulesSliderDeep.module.css'; import Slider from '@material-ui/lab/SliderStyled'; -export default function PlainCSSSlider() { +export default function CssModulesSliderDeep() { return (
From 2da9677b68377733e8542a7022e9b11c804f7100 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:07:43 +0200 Subject: [PATCH 08/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 2cdf0ca36f10b6..f5918192cee17b 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -161,6 +161,8 @@ export default function GlobalCSSSlider() { ![stars](https://img.shields.io/github/stars/styled-components/styled-components.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/styled-components.svg?) +### Change the default styled engine + By default the Material-UI components, comes with emotion as their style engine. However, if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). From 06b5395bbed1b7973035e61aaa11ff48d4e78e59 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:08:22 +0200 Subject: [PATCH 09/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index f5918192cee17b..3df3fd75570675 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -38,7 +38,7 @@ import * as React from 'react'; import Slider from '@material-ui/lab/SliderStyled'; import './PlainCssSlider.css'; -export default function PlainCSSSlider() { +export default function PlainCssSlider() { return (
From 33343f47a58fd8bf160ff91f4534ceb06a4c4d20 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:08:52 +0200 Subject: [PATCH 10/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 3df3fd75570675..38fb024a2bb506 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -338,7 +338,7 @@ import React from 'react'; import styles from './CssModulesSlider.module.css'; import Slider from '@material-ui/lab/SliderStyled'; -export default function PlainCSSSlider() { +export default function CssModulesSlider() { return (
From db88770f4bd545508433dd0f9cc8802b97961694 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:09:36 +0200 Subject: [PATCH 11/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 38fb024a2bb506..f89472ff5837d1 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -50,7 +50,7 @@ export default function PlainCssSlider() { ### Controlling priority ⚠️ -**Note:** Most of the CSS-in-JS solutions inject their 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, as in the demo: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order, as in the demo: ```jsx import * as React from 'react'; From 92c19b351d4250732b59359a0c0d03f1a2b7b7dd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:10:05 +0200 Subject: [PATCH 12/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index f89472ff5837d1..38e5ba704127b6 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -330,7 +330,7 @@ bundling solution people are using. } ``` -**CssModulesButton.js** +**CssModulesSlider.js** ```jsx import React from 'react'; From 32907003ff548b6ed4a12db714a6b2086294713d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:10:50 +0200 Subject: [PATCH 13/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 38e5ba704127b6..0b7f8e9f7df52f 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -82,7 +82,7 @@ export default function App() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. However, the thumb is not the root element of Slider and therefore customization as above will not work. -You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. +You need to use the `componentProps` API of Material-UI, in order to provide custom class names for the slots. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 1895e901cf0183f53d4cf64d2b04bb81163189b5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:11:27 +0200 Subject: [PATCH 14/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 0b7f8e9f7df52f..52e8b206e16437 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -185,7 +185,7 @@ const CustomizedSlider = styled(Slider)` } `; -export default function App() { +export default function StyledComponents() { return ; } ``` From 9a25f7148393e8d90bd50aaf1a4ce1c48db7aeec Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:11:44 +0200 Subject: [PATCH 15/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 52e8b206e16437..dfbeaac938dc28 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -263,7 +263,7 @@ the color manipulations, the transitions, the media queries, and more. By using the Material-UI's Provider, the theme will be available for the context as well (emotion or styled-components, depending on your configuraiton). -We encourage to share the same theme object between Material-UI and your styles. +You are encouraged to share the same theme object between Material-UI and your styles. ```jsx const CustomizedSlider = styled(Slider)` From 34c122f4d610fb1444bfa23c14f72bca58fb6178 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:14:33 +0200 Subject: [PATCH 16/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index dfbeaac938dc28..a9ec34d827840b 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -325,6 +325,7 @@ bundling solution people are using. .slider { color: #20b2aa; } + .slider:hover { color: #2e8b57; } From c661742e3f42de89ba40d8e10522a356f9f74159 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:15:24 +0200 Subject: [PATCH 17/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index a9ec34d827840b..f71caab22019c4 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -351,7 +351,7 @@ export default function CssModulesSlider() { ### Controlling priority ⚠️ -**Note:** Most of the CSS-in-JS solutions inject their 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, as in the demo: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order, as in the demo: ```jsx import * as React from 'react'; From 3ac70ed52716d0d350019bd570850d046f1a15e3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:21:32 +0200 Subject: [PATCH 18/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index f71caab22019c4..39c57891dadd02 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -257,7 +257,7 @@ export default function StyledComponentsDeep() { ### Theme -Material-UI has a rich theme structure that you can leverage for +Material-UI has a rich theme structure that you can take advantage of for the color manipulations, the transitions, the media queries, and more. By using the Material-UI's Provider, the theme will be available for the From 017f3ce4d683094ae9cd520efc5e75b2c899161a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:21:58 +0200 Subject: [PATCH 19/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 39c57891dadd02..ecc65c75d9cbc7 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -226,7 +226,7 @@ export default function App() { } ``` -The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.thumb`. +The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core), but you can provide your own class name: `.thumb`. ```jsx import * as React from 'react'; From 3460bde0a9d44494b80c8f35ca7e0c6acfa092c1 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:22:13 +0200 Subject: [PATCH 20/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index ecc65c75d9cbc7..4e356bea29f010 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -258,7 +258,7 @@ export default function StyledComponentsDeep() { ### Theme Material-UI has a rich theme structure that you can take advantage of for -the color manipulations, the transitions, the media queries, and more. +color manipulations, transitions, media queries, and more. By using the Material-UI's Provider, the theme will be available for the context as well (emotion or styled-components, depending on your configuraiton). From a786cc876086f8e8b0294df3239e929355288e0d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:44:36 +0200 Subject: [PATCH 21/96] addressed some comments --- .../pages/guides/interoperability/EmotionTheme.js | 10 +++++----- .../pages/guides/interoperability/EmotionTheme.tsx | 10 +++++----- .../guides/interoperability/StyledComponentsDeep.js | 2 +- .../guides/interoperability/StyledComponentsDeep.tsx | 2 +- .../guides/interoperability/StyledComponentsTheme.js | 10 +++++----- .../interoperability/StyledComponentsTheme.tsx | 10 +++++----- .../guides/interoperability/interoperability.md | 12 ++++++------ 7 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js index 7aace9692b2697..b6133fba1e6d99 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -3,7 +3,7 @@ import { jsx, css } from '@emotion/core'; import Slider from '@material-ui/lab/SliderStyled'; import { createMuiTheme, - ThemeProvider as MuiThemeProvider, + ThemeProvider, darken, } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; @@ -18,8 +18,8 @@ const customTheme = createMuiTheme({ export default function EmotionTheme() { return ( - - + + css` @@ -29,7 +29,7 @@ export default function EmotionTheme() { } `} /> - - + + ); } diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx index 7aace9692b2697..b6133fba1e6d99 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.tsx +++ b/docs/src/pages/guides/interoperability/EmotionTheme.tsx @@ -3,7 +3,7 @@ import { jsx, css } from '@emotion/core'; import Slider from '@material-ui/lab/SliderStyled'; import { createMuiTheme, - ThemeProvider as MuiThemeProvider, + ThemeProvider, darken, } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; @@ -18,8 +18,8 @@ const customTheme = createMuiTheme({ export default function EmotionTheme() { return ( - - + + css` @@ -29,7 +29,7 @@ export default function EmotionTheme() { } `} /> - - + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index d96e0240634543..da56c5a8b1351f 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -9,7 +9,7 @@ const SliderCustomized = styled(Slider)` color: #2e8b57; } & .MuiSlider-thumb { - border-radius: 30%; + border-radius: 1px; } `; diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index d96e0240634543..da56c5a8b1351f 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -9,7 +9,7 @@ const SliderCustomized = styled(Slider)` color: #2e8b57; } & .MuiSlider-thumb { - border-radius: 30%; + border-radius: 1px; } `; diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 8d2bbf37162df6..9f92ca5928528e 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { createMuiTheme, experimentalStyled as styled, - ThemeProvider as MuiThemeProvider, + ThemeProvider, darken, } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/SliderStyled'; @@ -27,10 +27,10 @@ const CustomizedSlider = styled(Slider)` export default function StyledComponentsTheme() { return ( - - + + - - + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 8d2bbf37162df6..9f92ca5928528e 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { createMuiTheme, experimentalStyled as styled, - ThemeProvider as MuiThemeProvider, + ThemeProvider, darken, } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/SliderStyled'; @@ -27,10 +27,10 @@ const CustomizedSlider = styled(Slider)` export default function StyledComponentsTheme() { return ( - - + + - - + + ); } diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 4e356bea29f010..fccf74a1abbc76 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -98,7 +98,7 @@ The following example overrides the `thumb` style of `Slider` in addition to the color: #2e8b57; } .slider .thumb { - border-radius: 30%; + border-radius: 1px; } ``` @@ -140,7 +140,7 @@ Explicitly providing the class names to the component is too much effort? color: #2e8b57; } .MuiSlider-root .MuiSlider-thumb { - border-radius: 30%; + border-radius: 1px; } ``` @@ -212,7 +212,7 @@ const CustomizedSliderDeep = styled(Slider)` color: #2e8b57; } & .MuiSlider-thumb { - border-radius: 30%; + border-radius: 1px; } `; @@ -241,7 +241,7 @@ const StyledSlider = styled((props) => ( color: #2e8b57; } & .thumb { - border-radius: 30%; + border-radius: 1px; } `; @@ -399,7 +399,7 @@ The following example overrides the `thumb` style of `Slider` in addition to the color: #2e8b57; } .slider .thumb { - border-radius: 30%; + border-radius: 1px; } ``` @@ -436,7 +436,7 @@ Emotion's **css()** method works seamlessly with Material-UI. {{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideToolbar": true}} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-lvtcm) ```jsx /** @jsx jsx */ From c2181c68197008a4b165a7e8f1634bf22b6ccbd5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:46:22 +0200 Subject: [PATCH 22/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index fccf74a1abbc76..8c79857df3fd74 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -151,7 +151,7 @@ import * as React from 'react'; import Slider from '@material-ui/lab/SliderStyled'; import './GlobalCssSlider.css'; -export default function GlobalCSSSlider() { +export default function GlobalCssSlider() { return ; } ``` From 118861ecbdc7dbdc591735629bf87925e85369d4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:48:18 +0200 Subject: [PATCH 23/96] Removed emotion's theming guide and linked styled-components instead --- .../guides/interoperability/EmotionTheme.js | 35 ------------------- .../guides/interoperability/EmotionTheme.tsx | 35 ------------------- .../interoperability/interoperability.md | 22 +----------- 3 files changed, 1 insertion(+), 91 deletions(-) delete mode 100644 docs/src/pages/guides/interoperability/EmotionTheme.js delete mode 100644 docs/src/pages/guides/interoperability/EmotionTheme.tsx diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js deleted file mode 100644 index b6133fba1e6d99..00000000000000 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ /dev/null @@ -1,35 +0,0 @@ -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import Slider from '@material-ui/lab/SliderStyled'; -import { - createMuiTheme, - ThemeProvider, - darken, -} from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; - -const customTheme = createMuiTheme({ - palette: { - primary: { - main: '#20b2aa', - }, - }, -}); - -export default function EmotionTheme() { - return ( - - - css` - color: ${theme.palette.primary.main}; - :hover { - color: ${darken(theme.palette.primary.main, 0.2)}; - } - `} - /> - - - ); -} diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx deleted file mode 100644 index b6133fba1e6d99..00000000000000 --- a/docs/src/pages/guides/interoperability/EmotionTheme.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import Slider from '@material-ui/lab/SliderStyled'; -import { - createMuiTheme, - ThemeProvider, - darken, -} from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; - -const customTheme = createMuiTheme({ - palette: { - primary: { - main: '#20b2aa', - }, - }, -}); - -export default function EmotionTheme() { - return ( - - - css` - color: ${theme.palette.primary.main}; - :hover { - color: ${darken(theme.palette.primary.main, 0.2)}; - } - `} - /> - - - ); -} diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index fccf74a1abbc76..5cf4c58e2dd270 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -463,27 +463,7 @@ export default function EmotionCSS() { ### Theme -Material-UI has a rich theme structure that you can leverage for -the color manipulations, the transitions, the media queries, and more. - -By using the Material-UI's Provider, the theme will be available for the -context as well (emotion or styled-components, depending on your configuraiton). - -We encourage to share the same theme object between Material-UI and your styles. - -```jsx - css` - color: ${theme.palette.primary.main}; - :hover { - color: ${darken(theme.palette.primary.main, 0.2)}; - } - `} -/> -``` - -{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). ### The `styled()` API From fbff3c0605f49bce990bb6cd249234c8c3df7f21 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:49:23 +0200 Subject: [PATCH 24/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 6f1bde734f52fa..1f87f7534f5157 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -68,7 +68,7 @@ const cache = createCache({ container: emotionContainer, }); -export default function App() { +export default function PlainCssPriority() { return ( {/* Your component tree. Now you can override Material-UI's styles. */} From cfc0efc9e8113907d2611e22fd69f313ff51ccae Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:51:27 +0200 Subject: [PATCH 25/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 1f87f7534f5157..daaeffae3b0c68 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -164,7 +164,7 @@ export default function GlobalCssSlider() { ### Change the default styled engine By default the Material-UI components, comes with emotion as their style engine. However, -if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). +if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). After the style engine is configured properly, you can use the `experimentalStyled()` utility from `@material-ui/core/styles` and have direct access to the theme. From 3e46d88b272ebd4f942539deff02b9114bf7e208 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:55:44 +0200 Subject: [PATCH 26/96] specified emotion in the demo --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index daaeffae3b0c68..88184b603645b4 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -50,7 +50,7 @@ export default function PlainCssSlider() { ### Controlling priority ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order, as in the demo: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here is a demo of how it can be done for our default styled engine - emotion: ```jsx import * as React from 'react'; From e3241cc42cc809d33bed186cc648aff74a526846 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:24:38 +0200 Subject: [PATCH 27/96] updated global css guide --- .../interoperability/interoperability.md | 71 +++++++++++++++++-- 1 file changed, 67 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 88184b603645b4..09e841db38be26 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -81,8 +81,8 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -However, the thumb is not the root element of Slider and therefore customization as above will not work. -You need to use the `componentProps` API of Material-UI, in order to provide custom class names for the slots. +In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -132,6 +132,69 @@ Explicitly providing the class names to the component is too much effort? **GlobalCssSlider.css** +```css +.MuiSlider-root { + color: #20b2aa; +} +.MuiSlider-root:hover { + color: #2e8b57; +} +``` + +**GlobalCssSlider.js** + +```jsx +import * as React from 'react'; +import Slider from '@material-ui/lab/SliderStyled'; +import './GlobalCssSlider.css'; + +export default function GlobalCssSlider() { + return ; +} +``` + +### Controlling priority ⚠️ + +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here is a demo of how it can be done for our default styled engine - emotion: + +```jsx +import * as React from 'react'; +import { CacheProvider } from '@emotion/core'; +import createCache from '@emotion/cache'; + +const head = document.getElementsByTagName('head')[0]; + +const emotionContainer = head.insertBefore( + document.createElement('STYLE'), + head.firstChild, +); + +const cache = createCache({ + container: emotionContainer, +}); + +export default function PlainCssPriority() { + return ( + + {/* Your component tree. Now you can override Material-UI's styles. */} + + ); +} +``` + +### Deeper elements + +If you attempt to style the Slider, +you will likely need to affect some of the Slider's child elements, for example the thumb. +In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +to do the same. + +The following example overrides the `MuiSlider-thumb` style of `Slider` in addition to the custom styles on the slider itself. + +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideToolbar": true}} + +**GlobalCssSliderDeep.css** + ```css .MuiSlider-root { color: #20b2aa; @@ -144,12 +207,12 @@ Explicitly providing the class names to the component is too much effort? } ``` -**GlobalCssButton.js** +**GlobalCssSliderDeep.js** ```jsx import * as React from 'react'; import Slider from '@material-ui/lab/SliderStyled'; -import './GlobalCssSlider.css'; +import './GlobalCssSliderDeep.css'; export default function GlobalCssSlider() { return ; From fa38925841f9ad27a2ecef30bf6d4842e1a26ed0 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:28:02 +0200 Subject: [PATCH 28/96] Updated all depeer elements sections --- .../src/pages/guides/interoperability/interoperability.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 09e841db38be26..691a708b5afb11 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -257,8 +257,8 @@ export default function StyledComponents() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -However, the thumb is not the root element of Slider and therefore styled-components customization as above will not work. -You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. +In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -445,8 +445,8 @@ export default function App() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -However, the thumb is not the root element of Slider and therefore customization as above will not work. -You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. +In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 36f50ceb235cb2acff627c6bb18e581be7029937 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:31:51 +0200 Subject: [PATCH 29/96] cleanups --- docs/src/pages/guides/interoperability/interoperability.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 691a708b5afb11..46f7cfdb982caf 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -258,7 +258,7 @@ export default function StyledComponents() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need -to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. +to do the same. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -279,7 +279,7 @@ const CustomizedSliderDeep = styled(Slider)` } `; -export default function App() { +export default function CustomizedSliderDeepDemo() { return (
@@ -432,7 +432,7 @@ const cache = createCache({ container: emotionContainer, }); -export default function App() { +export default function CssModulesPriority() { return ( {/* Your component tree. Now you can override Material-UI's styles. */} From 9657598aeb550d331ead1cc58f4517619e4b3cac Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:36:23 +0200 Subject: [PATCH 30/96] Matt's feedback --- .../src/pages/guides/interoperability/interoperability.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 46f7cfdb982caf..606cb511b06e30 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -226,8 +226,8 @@ export default function GlobalCssSlider() { ### Change the default styled engine -By default the Material-UI components, comes with emotion as their style engine. However, -if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). +By default the Material-UI components come with emotion as their style engine. If +however, you would like to use `styled-components`, you can configure your app by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). After the style engine is configured properly, you can use the `experimentalStyled()` utility from `@material-ui/core/styles` and have direct access to the theme. @@ -323,8 +323,8 @@ export default function StyledComponentsDeep() { Material-UI has a rich theme structure that you can take advantage of for color manipulations, transitions, media queries, and more. -By using the Material-UI's Provider, the theme will be available for the -context as well (emotion or styled-components, depending on your configuraiton). +By using the Material-UI ThemeProvider, the theme will be available in the theme context +of the styled engine too (emotion or styled-components, depending on your configuration). You are encouraged to share the same theme object between Material-UI and your styles. From f050dc911c20e22cda6015dd9eb95fe2097101d6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:49:50 +0200 Subject: [PATCH 31/96] changed theme syntax --- .../guides/interoperability/StyledComponentsTheme.js | 8 ++++---- .../guides/interoperability/StyledComponentsTheme.tsx | 6 ++---- .../src/pages/guides/interoperability/interoperability.md | 6 ++---- 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 9f92ca5928528e..2bb08298c51ae5 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -16,14 +16,14 @@ const customTheme = createMuiTheme({ }, }); -const CustomizedSlider = styled(Slider)` - ${({ theme }) => ` +const CustomizedSlider = styled(Slider)( + ({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } - `} -`; +`, +); export default function StyledComponentsTheme() { return ( diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 9f92ca5928528e..2dfef5a526eaf2 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -16,14 +16,12 @@ const customTheme = createMuiTheme({ }, }); -const CustomizedSlider = styled(Slider)` - ${({ theme }) => ` +const CustomizedSlider = styled(Slider)(({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } - `} -`; +`); export default function StyledComponentsTheme() { return ( diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 606cb511b06e30..5d1da42a1d0600 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -329,14 +329,12 @@ of the styled engine too (emotion or styled-components, depending on your config You are encouraged to share the same theme object between Material-UI and your styles. ```jsx -const CustomizedSlider = styled(Slider)` - ${({ theme }) => ` +const CustomizedSlider = styled(Slider)(({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } - `} -`; +`); ``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} From a453edd3ad2970eecf58dbf2199cf8e2473c1eb8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:55:07 +0200 Subject: [PATCH 32/96] theme provider wording --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 5d1da42a1d0600..cf74cb77acd42d 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -323,7 +323,7 @@ export default function StyledComponentsDeep() { Material-UI has a rich theme structure that you can take advantage of for color manipulations, transitions, media queries, and more. -By using the Material-UI ThemeProvider, the theme will be available in the theme context +By using the Material-UI theme provider, the theme will be available in the theme context of the styled engine too (emotion or styled-components, depending on your configuration). You are encouraged to share the same theme object between Material-UI and your styles. From 29202c3e9ec910c8d9192eeee462f231f9358479 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:59:28 +0200 Subject: [PATCH 33/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index cf74cb77acd42d..97d89e7a1d39e0 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -50,7 +50,7 @@ export default function PlainCssSlider() { ### Controlling priority ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here is a demo of how it can be done for our default styled engine - emotion: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion: ```jsx import * as React from 'react'; From 7a8dd4ba6d40a02aa0980953774213eec5156538 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:01:11 +0200 Subject: [PATCH 34/96] controlling priority section --- docs/src/pages/guides/interoperability/interoperability.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 97d89e7a1d39e0..1930b69e67e8fd 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -155,7 +155,7 @@ export default function GlobalCssSlider() { ### Controlling priority ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here is a demo of how it can be done for our default styled engine - emotion: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion: ```jsx import * as React from 'react'; @@ -412,7 +412,7 @@ export default function CssModulesSlider() { ### Controlling priority ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order, as in the demo: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion: ```jsx import * as React from 'react'; From 84c58400fc766b638f096db9aa214c9c0dc63639 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:01:52 +0200 Subject: [PATCH 35/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 1930b69e67e8fd..f2b52bb2ea5a86 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -81,7 +81,7 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 91f2657241f9d3f5ba0415ce8b52af88ad782774 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:03:57 +0200 Subject: [PATCH 36/96] deeper elements section --- docs/src/pages/guides/interoperability/interoperability.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index f2b52bb2ea5a86..42b50bedb69495 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -186,7 +186,7 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need to do the same. The following example overrides the `MuiSlider-thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -257,7 +257,7 @@ export default function StyledComponents() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need to do the same. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -443,7 +443,7 @@ export default function CssModulesPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From fd41fefa8ab72583ed4ba2443ffd52e61983a0f5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:10:22 +0200 Subject: [PATCH 37/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 42b50bedb69495..b758b3546e3fe2 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -82,7 +82,7 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need -to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. +to do the same. In order to provide custom class names, you need to use the `componentProps` API. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 69359379d7d91545740ebafb117a4b655b27f12e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:11:09 +0200 Subject: [PATCH 38/96] componentProps section --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index b758b3546e3fe2..27ceedfff30e49 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -444,7 +444,7 @@ export default function CssModulesPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need -to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. +to do the same. In order to provide custom class names, you need to use the `componentProps` API. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 737ef6782551cc4852836ea5f095bc134cebad3b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:12:05 +0200 Subject: [PATCH 39/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 27ceedfff30e49..5e1a7718dbe00e 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -226,7 +226,7 @@ export default function GlobalCssSlider() { ### Change the default styled engine -By default the Material-UI components come with emotion as their style engine. If +By default, Material-UI components come with emotion as their style engine. If, however, you would like to use `styled-components`, you can configure your app by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). After the style engine is configured properly, you can use the `experimentalStyled()` utility From 4b7e792940845ac73eaf716ccbbb2d3b19f5ad96 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:35:28 +0200 Subject: [PATCH 40/96] prettier --- .../guides/interoperability/StyledComponentsTheme.tsx | 6 ++++-- .../pages/guides/interoperability/interoperability.md | 10 ++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 2dfef5a526eaf2..2bb08298c51ae5 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -16,12 +16,14 @@ const customTheme = createMuiTheme({ }, }); -const CustomizedSlider = styled(Slider)(({ theme }) => ` +const CustomizedSlider = styled(Slider)( + ({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } -`); +`, +); export default function StyledComponentsTheme() { return ( diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 27ceedfff30e49..b312e5a2199b37 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -226,7 +226,7 @@ export default function GlobalCssSlider() { ### Change the default styled engine -By default the Material-UI components come with emotion as their style engine. If +By default the Material-UI components come with emotion as their style engine. If however, you would like to use `styled-components`, you can configure your app by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). After the style engine is configured properly, you can use the `experimentalStyled()` utility @@ -323,18 +323,20 @@ export default function StyledComponentsDeep() { Material-UI has a rich theme structure that you can take advantage of for color manipulations, transitions, media queries, and more. -By using the Material-UI theme provider, the theme will be available in the theme context +By using the Material-UI theme provider, the theme will be available in the theme context of the styled engine too (emotion or styled-components, depending on your configuration). You are encouraged to share the same theme object between Material-UI and your styles. ```jsx -const CustomizedSlider = styled(Slider)(({ theme }) => ` +const CustomizedSlider = styled(Slider)( + ({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } -`); +`, +); ``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} From f6fc598ccba5c5aa635e9648e2e48d03e0d3f9bc Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 12 Oct 2020 17:17:34 +0200 Subject: [PATCH 41/96] wip --- .../interoperability/interoperability.md | 81 +++++++++++-------- 1 file changed, 47 insertions(+), 34 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 5007f7a4516cb9..1c20a11ac26ac9 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 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).

+

While you can use the emotion 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 principles applied here can be adapted to other libraries. @@ -18,7 +18,7 @@ Nothing fancy, just plain CSS. {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-mtzri) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-1k9wb) **PlainCssButton.css** @@ -50,64 +50,77 @@ export default function PlainCssButton() { ); } ``` - ### 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:** Most of the CSS-in-JS solutions inject their 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, as in the demo: ```jsx -import { StylesProvider } from '@material-ui/core/styles'; +import * as React from 'react'; +import { CacheProvider } from "@emotion/core"; +import createCache from "@emotion/cache"; -{/* Your component tree. - Now, you can override Material-UI's styles. */}; +const head = document.getElementsByTagName("head")[0]; + +const emotionContainer = head.insertBefore( + document.createElement("STYLE"), + head.firstChild +); + +const cache = createCache({ + container: emotionContainer +}); + +export default function PlainCSSButton() { + return ( + + {/* 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. +If you attempt to style the Slider, +you will likely need to affect some of the Slider's child elements, for example the thumb. +However, the rhumb is not the root element of Slider and therefore styled-components customization as above will not work. +You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. -The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. +The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} -**PlainCssButtonDeep.css** +**PlainCssSliderDeep.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; +.slider { + color: #20b2aa; } -.button:hover { - background-color: #5469d4; +.slider:hover { + color: #2e8b57; } -.button-label { - color: #fff; + +.slider .thumb { + border-radius: 30%; } ``` **PlainCssButtonDeep.js** ```jsx -import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import './PlainCssButtonDeep.css'; +import * as React from "react"; +import Slider from "@material-ui/lab/SliderStyled"; +import "./PlainCssSliderDeep.css"; -export default function PlainCssButtonDeep() { +export default function PlainCSSSlider() { return (
- - + +
); } From b81f58884f3bec7cf198e3597ed88b5c623d5259 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Oct 2020 11:48:31 +0200 Subject: [PATCH 42/96] styled-components, emotion, global --- .../guides/interoperability/EmotionCSS.js | 27 +- .../guides/interoperability/EmotionCSS.tsx | 27 +- .../guides/interoperability/EmotionTheme.js | 35 +-- .../guides/interoperability/EmotionTheme.tsx | 35 +-- .../interoperability/StyledComponents.js | 26 +- .../interoperability/StyledComponents.tsx | 26 +- .../interoperability/StyledComponentsDeep.js | 32 +-- .../interoperability/StyledComponentsDeep.tsx | 31 +- .../interoperability/StyledComponentsTheme.js | 35 +-- .../StyledComponentsTheme.tsx | 38 +-- .../interoperability/interoperability.md | 265 +++++++----------- 11 files changed, 218 insertions(+), 359 deletions(-) diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js index 854e0333c39d85..85a1b3be730a4a 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.js +++ b/docs/src/pages/guides/interoperability/EmotionCSS.js @@ -1,26 +1,21 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; export default function EmotionCSS() { return ( -
- - -
+ /> + ); } diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx index 854e0333c39d85..85a1b3be730a4a 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx +++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx @@ -1,26 +1,21 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; export default function EmotionCSS() { return ( -
- - -
+ /> + ); } diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js index 392d92994337b8..7aace9692b2697 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -1,17 +1,17 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; -import { ThemeProvider } from 'emotion-theming'; +import Slider from '@material-ui/lab/SliderStyled'; import { createMuiTheme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ palette: { primary: { - main: '#6772e5', + main: '#20b2aa', }, }, }); @@ -19,30 +19,17 @@ const customTheme = createMuiTheme({ export default function EmotionTheme() { return ( - - - - + /> + ); } diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx index 392d92994337b8..7aace9692b2697 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.tsx +++ b/docs/src/pages/guides/interoperability/EmotionTheme.tsx @@ -1,17 +1,17 @@ /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; -import { ThemeProvider } from 'emotion-theming'; +import Slider from '@material-ui/lab/SliderStyled'; import { createMuiTheme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ palette: { primary: { - main: '#6772e5', + main: '#20b2aa', }, }, }); @@ -19,30 +19,17 @@ const customTheme = createMuiTheme({ export default function EmotionTheme() { return ( - - - - + /> + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js index 1b74604a38d6a3..eefb5b5f94229d 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.js +++ b/docs/src/pages/guides/interoperability/StyledComponents.js @@ -1,24 +1,20 @@ import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; -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; +const SliderCustomized = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } `; export default function StyledComponents() { return ( - - - Customized - + + + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx index 1b74604a38d6a3..eefb5b5f94229d 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponents.tsx @@ -1,24 +1,20 @@ import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; -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; +const SliderCustomized = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } `; export default function StyledComponents() { return ( - - - Customized - + + + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index f5446e973b4b32..d96e0240634543 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -1,27 +1,23 @@ import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; -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; +const SliderCustomized = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } - - & .MuiButton-label { - color: #fff; + & .MuiSlider-thumb { + border-radius: 30%; } `; -export default function StyledComponentsDeep() { +export default function StyledComponents() { return ( - - - Customized - + + + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index f5446e973b4b32..74ba8fbdd0e32a 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -1,27 +1,22 @@ import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; -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; +const SliderCustomized = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } - - & .MuiButton-label { - color: #fff; + & .MuiSlider-thumb { + border-radius: 30%; } `; -export default function StyledComponentsDeep() { +export default function StyledComponents() { return ( - - - Customized - +
+ + +
); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 05bd366b31e79d..2fbaf5fb972b39 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -1,47 +1,34 @@ import * as React from 'react'; -import styled, { ThemeProvider } from 'styled-components'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; const customTheme = createMuiTheme({ palette: { primary: { - main: '#6772e5', + main: '#20b2aa', }, }, }); -const StyledButton = styled(Button)` +const CustomizedSlider = styled(Slider)` ${({ 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; + color: ${theme.palette.primary.main}; + :hover { + color: ${darken(theme.palette.primary.main, 0.2)}; } `} `; export default function StyledComponentsTheme() { return ( - - - - - Customized - - - + + + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 05bd366b31e79d..c5d649a7919d7c 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -1,47 +1,37 @@ import * as React from 'react'; -import styled, { ThemeProvider } from 'styled-components'; -import NoSsr from '@material-ui/core/NoSsr'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, + Theme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ palette: { primary: { - main: '#6772e5', + main: '#20b2aa', }, }, }); -const StyledButton = styled(Button)` +const CustomizedSlider = styled(Slider)` ${({ 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; + color: ${theme.palette.primary.main}; + :hover { + color: ${darken(theme.palette.primary.main, 0.2)}; } `} `; export default function StyledComponentsTheme() { return ( - - - - - Customized - - - + + + + + ); } diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 1c20a11ac26ac9..c56151e1793fd3 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -20,32 +20,29 @@ Nothing fancy, just plain CSS. [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/plain-css-1k9wb) -**PlainCssButton.css** +**PlainCssSlider.css** ```css -.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; +.slider { + color: #20b2aa; } -.button:hover { - background-color: #5469d4; +.slider:hover { + color: #2e8b57; } ``` -**PlainCssButton.js** +**PlainCssSlider.js** ```jsx import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import './PlainCssButton.css'; +import Slider from "@material-ui/lab/SliderStyled"; +import './PlainCssSlider.css'; -export default function PlainCssButton() { +export default function PlainCSSSlider() { return (
- - + +
); } @@ -70,7 +67,7 @@ const cache = createCache({ container: emotionContainer }); -export default function PlainCSSButton() { +export default function App() { return ( {/* Your component tree. Now you can override Material-UI's styles. */} @@ -83,12 +80,12 @@ export default function PlainCSSButton() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -However, the rhumb is not the root element of Slider and therefore styled-components customization as above will not work. +However, the thumb is not the root element of Slider and therefore customization as above will not work. You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideToolbar": true}} **PlainCssSliderDeep.css** @@ -99,13 +96,12 @@ The following example overrides the `thumb` style of `Slider` in addition to the .slider:hover { color: #2e8b57; } - .slider .thumb { border-radius: 30%; } ``` -**PlainCssButtonDeep.js** +**PlainCssSliderDeep.js** ```jsx import * as React from "react"; @@ -131,21 +127,19 @@ export default function PlainCSSSlider() { 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) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/global-classnames-mc4wl) -**GlobalCssButton.css** +**GlobalCssSlider.css** ```css -.MuiButton-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; +.MuiSlider-root { + color: #20b2aa; } -.MuiButton-root:hover { - background-color: #5469d4; +.MuiSlider-root:hover { + color: #2e8b57; } -.MuiButton-label { - color: #fff; +.MuiSlider-root .MuiSlider-thumb { + border-radius: 30%; } ``` @@ -153,140 +147,106 @@ Explicitly providing the class names to the component is too much effort? ```jsx import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import './GlobalCssButton.css'; +import Slider from "@material-ui/lab/SliderStyled"; +import './GlobalCssSlider.css'; -export default function GlobalCssButton() { - return ; +export default function GlobalCSSSlider() { + 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. */}; -``` - ## Styled Components ![stars](https://img.shields.io/github/stars/styled-components/styled-components.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/styled-components.svg?) -The `styled()` method works perfectly on all of the components. +By default the Material-UI components, comes with emotion as their style engine. However, +if you would like to use `styled-components`, you can configure it, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). + +After the style engine is configured properly, you can use the `experimentalStyled()` utility +from `@material-ui/core/styles` and have direct access to the theme. {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-r1fsr) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-6bwu7) ```jsx -import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; +import * as React from "react"; +import Slider from "@material-ui/lab/SliderStyled"; +import { experimentalStyled as styled } from "@material-ui/core/styles"; -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; +const CustomizedSlider = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } `; -export default function StyledComponents() { - return ( -
- - Customized -
- ); +export default function App() { + return ; } ``` -### 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: - -```jsx -import { StylesProvider } from '@material-ui/core/styles'; - -{/* Your component tree. - Now, you can override Material-UI's styles. */}; -``` - -Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. Avoid the usage of `!important`. - ### 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 Material-UI [`classes`](/styles/advanced/#overriding-styles-classes-prop) API. +If you attempt to style the Slider, +you will likely need to affect some of the Slider's child elements, for example the thumb. +However, the thumb is not the root element of Slider and therefore styled-components customization as above will not work. +You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. -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" props that should not be passed on to the underlying component. +The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. {{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} ```jsx -import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; +import * as React from "react"; +import Slider from "@material-ui/lab/SliderStyled"; +import { experimentalStyled as styled } from "@material-ui/core/styles"; -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; +const CustomizedSliderDeep = styled(Slider)` + color: #20b2aa; + :hover { + color: #2e8b57; } - & .MuiButton-label { - color: #fff; + & .MuiSlider-thumb { + border-radius: 30%; } `; -export default function StyledComponentsDeep() { +export default function App() { 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`. +The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.thumb`. ```jsx -import * as React from 'react'; -import styled from 'styled-components'; -import Button from '@material-ui/core/Button'; +import * as React from "react"; +import { experimentalStyled as styled } from "@material-ui/core/styles"; +import Slider from "@material-ui/lab/SliderStyled"; -const StyledButton = styled(({ color, ...other }) => ( - - Customized + Default + Customized
); } @@ -297,25 +257,21 @@ export default function StyledComponentsDeep() { Material-UI has a rich theme structure that you can leverage for the color manipulations, the transitions, the media queries, and more. +By using the Material-UI's Provider, the theme will be available for the +context as well (emotion or styled-components, depending on your configuraiton). + 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; - } + css` + color: ${theme.palette.primary.main}; + :hover { + color: ${darken(theme.palette.primary.main, 0.2)}; + } `} -`; +/> ``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} @@ -465,67 +421,46 @@ Emotion's **css()** method works seamlessly with Material-UI. ```jsx /** @jsx jsx */ import { jsx, css } from '@emotion/core'; -import Button from '@material-ui/core/Button'; +import Slider from '@material-ui/lab/SliderStyled'; 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. +By using the Material-UI's Provider, the theme will be available for the +context as well (emotion or styled-components, depending on your configuraiton). + We encourage to share the same theme object between Material-UI and your styles. ```jsx - +/> ``` {{"demo": "pages/guides/interoperability/EmotionTheme.js"}} From 547b10ca526e58566ea29f17ac37dee6e284d1cd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Oct 2020 11:54:19 +0200 Subject: [PATCH 43/96] prettier --- .../StyledComponentsTheme.tsx | 1 - .../interoperability/interoperability.md | 45 ++++++++++--------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index c5d649a7919d7c..35d58ddb10f932 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, - Theme, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index c56151e1793fd3..b84744f29dc27c 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -35,7 +35,7 @@ Nothing fancy, just plain CSS. ```jsx import * as React from 'react'; -import Slider from "@material-ui/lab/SliderStyled"; +import Slider from '@material-ui/lab/SliderStyled'; import './PlainCssSlider.css'; export default function PlainCSSSlider() { @@ -47,24 +47,25 @@ export default function PlainCSSSlider() { ); } ``` + ### Controlling priority ⚠️ **Note:** Most of the CSS-in-JS solutions inject their 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, as in the demo: ```jsx import * as React from 'react'; -import { CacheProvider } from "@emotion/core"; -import createCache from "@emotion/cache"; +import { CacheProvider } from '@emotion/core'; +import createCache from '@emotion/cache'; -const head = document.getElementsByTagName("head")[0]; +const head = document.getElementsByTagName('head')[0]; const emotionContainer = head.insertBefore( - document.createElement("STYLE"), - head.firstChild + document.createElement('STYLE'), + head.firstChild, ); const cache = createCache({ - container: emotionContainer + container: emotionContainer, }); export default function App() { @@ -104,9 +105,9 @@ The following example overrides the `thumb` style of `Slider` in addition to the **PlainCssSliderDeep.js** ```jsx -import * as React from "react"; -import Slider from "@material-ui/lab/SliderStyled"; -import "./PlainCssSliderDeep.css"; +import * as React from 'react'; +import Slider from '@material-ui/lab/SliderStyled'; +import './PlainCssSliderDeep.css'; export default function PlainCSSSlider() { return ( @@ -115,7 +116,7 @@ export default function PlainCSSSlider() {
); @@ -147,7 +148,7 @@ Explicitly providing the class names to the component is too much effort? ```jsx import * as React from 'react'; -import Slider from "@material-ui/lab/SliderStyled"; +import Slider from '@material-ui/lab/SliderStyled'; import './GlobalCssSlider.css'; export default function GlobalCSSSlider() { @@ -171,9 +172,9 @@ from `@material-ui/core/styles` and have direct access to the theme. [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/styled-components-6bwu7) ```jsx -import * as React from "react"; -import Slider from "@material-ui/lab/SliderStyled"; -import { experimentalStyled as styled } from "@material-ui/core/styles"; +import * as React from 'react'; +import Slider from '@material-ui/lab/SliderStyled'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; const CustomizedSlider = styled(Slider)` color: #20b2aa; @@ -199,9 +200,9 @@ The following example overrides the `thumb` style of `Slider` in addition to the {{"demo": "pages/guides/interoperability/StyledComponentsDeep.js"}} ```jsx -import * as React from "react"; -import Slider from "@material-ui/lab/SliderStyled"; -import { experimentalStyled as styled } from "@material-ui/core/styles"; +import * as React from 'react'; +import Slider from '@material-ui/lab/SliderStyled'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; const CustomizedSliderDeep = styled(Slider)` color: #20b2aa; @@ -226,12 +227,12 @@ export default function App() { The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.thumb`. ```jsx -import * as React from "react"; -import { experimentalStyled as styled } from "@material-ui/core/styles"; -import Slider from "@material-ui/lab/SliderStyled"; +import * as React from 'react'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Slider from '@material-ui/lab/SliderStyled'; const StyledSlider = styled((props) => ( - + ))` color: #20b2aa; :hover { From 23ba19f280d82ce0e5db87e46539be550ae70720 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Oct 2020 13:41:53 +0200 Subject: [PATCH 44/96] css modules updated --- .../interoperability/StyledComponentsDeep.tsx | 5 +- .../interoperability/StyledComponentsTheme.js | 6 +- .../interoperability/interoperability.md | 116 ++++++++++-------- 3 files changed, 73 insertions(+), 54 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index 74ba8fbdd0e32a..d96e0240634543 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` color: #20b2aa; @@ -14,9 +15,9 @@ const SliderCustomized = styled(Slider)` export default function StyledComponents() { return ( -
+ -
+ ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 2fbaf5fb972b39..35d58ddb10f932 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -6,6 +6,7 @@ import { darken, } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/SliderStyled'; +import Box from '@material-ui/core/Box'; const customTheme = createMuiTheme({ palette: { @@ -27,8 +28,9 @@ const CustomizedSlider = styled(Slider)` export default function StyledComponentsTheme() { return ( - - + + + ); } diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index b84744f29dc27c..c72308c2667498 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -162,7 +162,7 @@ export default function GlobalCSSSlider() { ![npm](https://img.shields.io/npm/dm/styled-components.svg?) By default the Material-UI components, comes with emotion as their style engine. However, -if you would like to use `styled-components`, you can configure it, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). +if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). After the style engine is configured properly, you can use the `experimentalStyled()` utility from `@material-ui/core/styles` and have direct access to the theme. @@ -264,15 +264,14 @@ context as well (emotion or styled-components, depending on your configuraiton). We encourage to share the same theme object between Material-UI and your styles. ```jsx - css` - color: ${theme.palette.primary.main}; - :hover { - color: ${darken(theme.palette.primary.main, 0.2)}; - } +const CustomizedSlider = styled(Slider)` + ${({ theme }) => ` + color: ${theme.palette.primary.main}; + :hover { + color: ${darken(theme.palette.primary.main, 0.2)}; + } `} -/> +`; ``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} @@ -316,35 +315,32 @@ bundling solution people are using. {{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-3j29h) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/css-modules-pkm9l) -**CssModulesButton.css** +**CssModulesSlider.module.css** ```css -.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; +.slider { + color: #20b2aa; } -.button:hover { - background-color: #5469d4; +.slider:hover { + color: #2e8b57; } ``` **CssModulesButton.js** ```jsx -import * as React from 'react'; +import React from 'react'; // webpack, parcel or else will inject the CSS into the page -import styles from './CssModulesButton.css'; -import Button from '@material-ui/core/Button'; +import styles from './CssModulesSlider.module.css'; +import Slider from '@material-ui/lab/SliderStyled'; -export default function CssModulesButton() { +export default function PlainCSSSlider() { return (
- - + +
); } @@ -352,55 +348,75 @@ export default function CssModulesButton() { ### 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:** Most of the CSS-in-JS solutions inject their 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, as in the demo: ```jsx -import { StylesProvider } from '@material-ui/core/styles'; +import * as React from 'react'; +import { CacheProvider } from '@emotion/core'; +import createCache from '@emotion/cache'; + +const head = document.getElementsByTagName('head')[0]; + +const emotionContainer = head.insertBefore( + document.createElement('STYLE'), + head.firstChild, +); -{/* Your component tree. - Now, you can override Material-UI's styles. */}; +const cache = createCache({ + container: emotionContainer, +}); + +export default function App() { + return ( + + {/* 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. +If you attempt to style the Slider, +you will likely need to affect some of the Slider's child elements, for example the thumb. +However, the thumb is not the root element of Slider and therefore customization as above will not work. +You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. -The following example overrides the `label` style of `Button` in addition to the custom styles on the button itself. +The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. -{{"demo": "pages/guides/interoperability/StyledComponents.js", "hideToolbar": true}} +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideToolbar": true}} -**CssModulesButtonDeep.css** +**CssModulesSliderDeep.module.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; +.slider { + color: #20b2aa; } -.root:hover { - background-color: #5469d4; +.slider:hover { + color: #2e8b57; } -.label { - color: #fff; +.slider .thumb { + border-radius: 30%; } ``` -**CssModulesButtonDeep.js** +**CssModulesSliderDeep.js** ```jsx -import * as React from 'react'; +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'; +import styles from './CssModulesSliderDeep.module.css'; +import Slider from '@material-ui/lab/SliderStyled'; -export default function CssModulesButtonDeep() { +export default function PlainCSSSlider() { return (
- - + +
); } From 76f30db30bf99c0d2cbc39afb0ce4f81f34f4a4d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 13 Oct 2020 15:03:54 +0200 Subject: [PATCH 45/96] fixed duplicated import --- docs/src/pages/guides/interoperability/StyledComponentsTheme.js | 2 +- .../src/pages/guides/interoperability/StyledComponentsTheme.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 35d58ddb10f932..8d2bbf37162df6 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -1,7 +1,7 @@ import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, + experimentalStyled as styled, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 35d58ddb10f932..8d2bbf37162df6 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; import { createMuiTheme, + experimentalStyled as styled, ThemeProvider as MuiThemeProvider, darken, } from '@material-ui/core/styles'; From 83ff71d13962688f98adbfff9d4195b0d8eabfa1 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:05:52 +0200 Subject: [PATCH 46/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index c72308c2667498..1744aa3dcbb4da 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -109,7 +109,7 @@ import * as React from 'react'; import Slider from '@material-ui/lab/SliderStyled'; import './PlainCssSliderDeep.css'; -export default function PlainCSSSlider() { +export default function PlainCssSliderDeep() { return (
From 7b8f67cbcea7cc8d783e908eb6d68f58ed890af7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:06:18 +0200 Subject: [PATCH 47/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 1744aa3dcbb4da..2cdf0ca36f10b6 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -408,7 +408,7 @@ import React from 'react'; import styles from './CssModulesSliderDeep.module.css'; import Slider from '@material-ui/lab/SliderStyled'; -export default function PlainCSSSlider() { +export default function CssModulesSliderDeep() { return (
From 73bf3593484c830049759a15b1928cd6b62b1275 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:07:43 +0200 Subject: [PATCH 48/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 2cdf0ca36f10b6..f5918192cee17b 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -161,6 +161,8 @@ export default function GlobalCSSSlider() { ![stars](https://img.shields.io/github/stars/styled-components/styled-components.svg?style=social&label=Star) ![npm](https://img.shields.io/npm/dm/styled-components.svg?) +### Change the default styled engine + By default the Material-UI components, comes with emotion as their style engine. However, if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). From f53c876de751029fe5ca8a6193c00e0fb3b046c1 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:08:22 +0200 Subject: [PATCH 49/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index f5918192cee17b..3df3fd75570675 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -38,7 +38,7 @@ import * as React from 'react'; import Slider from '@material-ui/lab/SliderStyled'; import './PlainCssSlider.css'; -export default function PlainCSSSlider() { +export default function PlainCssSlider() { return (
From 4ea9daa62ecdeffa51e6b6e929d4de066f260459 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:08:52 +0200 Subject: [PATCH 50/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 3df3fd75570675..38fb024a2bb506 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -338,7 +338,7 @@ import React from 'react'; import styles from './CssModulesSlider.module.css'; import Slider from '@material-ui/lab/SliderStyled'; -export default function PlainCSSSlider() { +export default function CssModulesSlider() { return (
From f28e476f4271739dc637e94fe1b2789745491870 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:09:36 +0200 Subject: [PATCH 51/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 38fb024a2bb506..f89472ff5837d1 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -50,7 +50,7 @@ export default function PlainCssSlider() { ### Controlling priority ⚠️ -**Note:** Most of the CSS-in-JS solutions inject their 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, as in the demo: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order, as in the demo: ```jsx import * as React from 'react'; From 6369872e223304587acf99ebe1e8aa143e17c9dc Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:10:05 +0200 Subject: [PATCH 52/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index f89472ff5837d1..38e5ba704127b6 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -330,7 +330,7 @@ bundling solution people are using. } ``` -**CssModulesButton.js** +**CssModulesSlider.js** ```jsx import React from 'react'; From 82098ef6a79fa2e33b36221fe7bfa6ea5ea6a2c3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:10:50 +0200 Subject: [PATCH 53/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 38e5ba704127b6..0b7f8e9f7df52f 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -82,7 +82,7 @@ export default function App() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. However, the thumb is not the root element of Slider and therefore customization as above will not work. -You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. +You need to use the `componentProps` API of Material-UI, in order to provide custom class names for the slots. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 0c06f382c5d282c8cacf4f385f906e3d1924ab6a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:11:27 +0200 Subject: [PATCH 54/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 0b7f8e9f7df52f..52e8b206e16437 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -185,7 +185,7 @@ const CustomizedSlider = styled(Slider)` } `; -export default function App() { +export default function StyledComponents() { return ; } ``` From 03da879790f186f77b1e42bd66570442dfe6c1b3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:11:44 +0200 Subject: [PATCH 55/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 52e8b206e16437..dfbeaac938dc28 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -263,7 +263,7 @@ the color manipulations, the transitions, the media queries, and more. By using the Material-UI's Provider, the theme will be available for the context as well (emotion or styled-components, depending on your configuraiton). -We encourage to share the same theme object between Material-UI and your styles. +You are encouraged to share the same theme object between Material-UI and your styles. ```jsx const CustomizedSlider = styled(Slider)` From 2eaa50fe72aeaf3986ef412894107f3a96bd65b6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:14:33 +0200 Subject: [PATCH 56/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index dfbeaac938dc28..a9ec34d827840b 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -325,6 +325,7 @@ bundling solution people are using. .slider { color: #20b2aa; } + .slider:hover { color: #2e8b57; } From 69c49045a3ba79a58c6fb2669e101148c2639a5c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:15:24 +0200 Subject: [PATCH 57/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index a9ec34d827840b..f71caab22019c4 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -351,7 +351,7 @@ export default function CssModulesSlider() { ### Controlling priority ⚠️ -**Note:** Most of the CSS-in-JS solutions inject their 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, as in the demo: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order, as in the demo: ```jsx import * as React from 'react'; From 00b4b7e05e1bfce99cd118382fb1ebd4da7e619d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:21:32 +0200 Subject: [PATCH 58/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index f71caab22019c4..39c57891dadd02 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -257,7 +257,7 @@ export default function StyledComponentsDeep() { ### Theme -Material-UI has a rich theme structure that you can leverage for +Material-UI has a rich theme structure that you can take advantage of for the color manipulations, the transitions, the media queries, and more. By using the Material-UI's Provider, the theme will be available for the From a1e5f2dfd39ffbdc9699ebe323ab0b3d469ad033 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:21:58 +0200 Subject: [PATCH 59/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 39c57891dadd02..ecc65c75d9cbc7 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -226,7 +226,7 @@ export default function App() { } ``` -The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core) but you can provide your own class name: `.thumb`. +The above demo relies on the [default `className` values](/styles/advanced/#with-material-ui-core), but you can provide your own class name: `.thumb`. ```jsx import * as React from 'react'; From 90f7016195f76765fcd3043cd016de6019698ad3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 10:22:13 +0200 Subject: [PATCH 60/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index ecc65c75d9cbc7..4e356bea29f010 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -258,7 +258,7 @@ export default function StyledComponentsDeep() { ### Theme Material-UI has a rich theme structure that you can take advantage of for -the color manipulations, the transitions, the media queries, and more. +color manipulations, transitions, media queries, and more. By using the Material-UI's Provider, the theme will be available for the context as well (emotion or styled-components, depending on your configuraiton). From 90fa6a77327a221ab905b078f4db92c2670a1b80 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:44:36 +0200 Subject: [PATCH 61/96] addressed some comments --- .../pages/guides/interoperability/EmotionTheme.js | 10 +++++----- .../pages/guides/interoperability/EmotionTheme.tsx | 10 +++++----- .../guides/interoperability/StyledComponentsDeep.js | 2 +- .../guides/interoperability/StyledComponentsDeep.tsx | 2 +- .../guides/interoperability/StyledComponentsTheme.js | 10 +++++----- .../interoperability/StyledComponentsTheme.tsx | 10 +++++----- .../guides/interoperability/interoperability.md | 12 ++++++------ 7 files changed, 28 insertions(+), 28 deletions(-) diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js index 7aace9692b2697..b6133fba1e6d99 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ b/docs/src/pages/guides/interoperability/EmotionTheme.js @@ -3,7 +3,7 @@ import { jsx, css } from '@emotion/core'; import Slider from '@material-ui/lab/SliderStyled'; import { createMuiTheme, - ThemeProvider as MuiThemeProvider, + ThemeProvider, darken, } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; @@ -18,8 +18,8 @@ const customTheme = createMuiTheme({ export default function EmotionTheme() { return ( - - + + css` @@ -29,7 +29,7 @@ export default function EmotionTheme() { } `} /> - - + + ); } diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx index 7aace9692b2697..b6133fba1e6d99 100644 --- a/docs/src/pages/guides/interoperability/EmotionTheme.tsx +++ b/docs/src/pages/guides/interoperability/EmotionTheme.tsx @@ -3,7 +3,7 @@ import { jsx, css } from '@emotion/core'; import Slider from '@material-ui/lab/SliderStyled'; import { createMuiTheme, - ThemeProvider as MuiThemeProvider, + ThemeProvider, darken, } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; @@ -18,8 +18,8 @@ const customTheme = createMuiTheme({ export default function EmotionTheme() { return ( - - + + css` @@ -29,7 +29,7 @@ export default function EmotionTheme() { } `} /> - - + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index d96e0240634543..da56c5a8b1351f 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -9,7 +9,7 @@ const SliderCustomized = styled(Slider)` color: #2e8b57; } & .MuiSlider-thumb { - border-radius: 30%; + border-radius: 1px; } `; diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index d96e0240634543..da56c5a8b1351f 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -9,7 +9,7 @@ const SliderCustomized = styled(Slider)` color: #2e8b57; } & .MuiSlider-thumb { - border-radius: 30%; + border-radius: 1px; } `; diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 8d2bbf37162df6..9f92ca5928528e 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { createMuiTheme, experimentalStyled as styled, - ThemeProvider as MuiThemeProvider, + ThemeProvider, darken, } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/SliderStyled'; @@ -27,10 +27,10 @@ const CustomizedSlider = styled(Slider)` export default function StyledComponentsTheme() { return ( - - + + - - + + ); } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 8d2bbf37162df6..9f92ca5928528e 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { createMuiTheme, experimentalStyled as styled, - ThemeProvider as MuiThemeProvider, + ThemeProvider, darken, } from '@material-ui/core/styles'; import Slider from '@material-ui/lab/SliderStyled'; @@ -27,10 +27,10 @@ const CustomizedSlider = styled(Slider)` export default function StyledComponentsTheme() { return ( - - + + - - + + ); } diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 4e356bea29f010..fccf74a1abbc76 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -98,7 +98,7 @@ The following example overrides the `thumb` style of `Slider` in addition to the color: #2e8b57; } .slider .thumb { - border-radius: 30%; + border-radius: 1px; } ``` @@ -140,7 +140,7 @@ Explicitly providing the class names to the component is too much effort? color: #2e8b57; } .MuiSlider-root .MuiSlider-thumb { - border-radius: 30%; + border-radius: 1px; } ``` @@ -212,7 +212,7 @@ const CustomizedSliderDeep = styled(Slider)` color: #2e8b57; } & .MuiSlider-thumb { - border-radius: 30%; + border-radius: 1px; } `; @@ -241,7 +241,7 @@ const StyledSlider = styled((props) => ( color: #2e8b57; } & .thumb { - border-radius: 30%; + border-radius: 1px; } `; @@ -399,7 +399,7 @@ The following example overrides the `thumb` style of `Slider` in addition to the color: #2e8b57; } .slider .thumb { - border-radius: 30%; + border-radius: 1px; } ``` @@ -436,7 +436,7 @@ Emotion's **css()** method works seamlessly with Material-UI. {{"demo": "pages/guides/interoperability/EmotionCSS.js", "hideToolbar": true}} -[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-bgfxj) +[![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/emotion-lvtcm) ```jsx /** @jsx jsx */ From 8ca53099afc49aa0528aa30de00a0b6f8b262269 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:48:18 +0200 Subject: [PATCH 62/96] Removed emotion's theming guide and linked styled-components instead --- .../guides/interoperability/EmotionTheme.js | 35 ------------------- .../guides/interoperability/EmotionTheme.tsx | 35 ------------------- .../interoperability/interoperability.md | 22 +----------- 3 files changed, 1 insertion(+), 91 deletions(-) delete mode 100644 docs/src/pages/guides/interoperability/EmotionTheme.js delete mode 100644 docs/src/pages/guides/interoperability/EmotionTheme.tsx diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.js b/docs/src/pages/guides/interoperability/EmotionTheme.js deleted file mode 100644 index b6133fba1e6d99..00000000000000 --- a/docs/src/pages/guides/interoperability/EmotionTheme.js +++ /dev/null @@ -1,35 +0,0 @@ -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import Slider from '@material-ui/lab/SliderStyled'; -import { - createMuiTheme, - ThemeProvider, - darken, -} from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; - -const customTheme = createMuiTheme({ - palette: { - primary: { - main: '#20b2aa', - }, - }, -}); - -export default function EmotionTheme() { - return ( - - - css` - color: ${theme.palette.primary.main}; - :hover { - color: ${darken(theme.palette.primary.main, 0.2)}; - } - `} - /> - - - ); -} diff --git a/docs/src/pages/guides/interoperability/EmotionTheme.tsx b/docs/src/pages/guides/interoperability/EmotionTheme.tsx deleted file mode 100644 index b6133fba1e6d99..00000000000000 --- a/docs/src/pages/guides/interoperability/EmotionTheme.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/** @jsx jsx */ -import { jsx, css } from '@emotion/core'; -import Slider from '@material-ui/lab/SliderStyled'; -import { - createMuiTheme, - ThemeProvider, - darken, -} from '@material-ui/core/styles'; -import Box from '@material-ui/core/Box'; - -const customTheme = createMuiTheme({ - palette: { - primary: { - main: '#20b2aa', - }, - }, -}); - -export default function EmotionTheme() { - return ( - - - css` - color: ${theme.palette.primary.main}; - :hover { - color: ${darken(theme.palette.primary.main, 0.2)}; - } - `} - /> - - - ); -} diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index fccf74a1abbc76..5cf4c58e2dd270 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -463,27 +463,7 @@ export default function EmotionCSS() { ### Theme -Material-UI has a rich theme structure that you can leverage for -the color manipulations, the transitions, the media queries, and more. - -By using the Material-UI's Provider, the theme will be available for the -context as well (emotion or styled-components, depending on your configuraiton). - -We encourage to share the same theme object between Material-UI and your styles. - -```jsx - css` - color: ${theme.palette.primary.main}; - :hover { - color: ${darken(theme.palette.primary.main, 0.2)}; - } - `} -/> -``` - -{{"demo": "pages/guides/interoperability/EmotionTheme.js"}} +It works exactly like styled components. You can [use the same guide](/guides/interoperability/#styled-components). ### The `styled()` API From e676fa7792b54125064364c2acff388f45aa3385 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:46:22 +0200 Subject: [PATCH 63/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 5cf4c58e2dd270..6f1bde734f52fa 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -151,7 +151,7 @@ import * as React from 'react'; import Slider from '@material-ui/lab/SliderStyled'; import './GlobalCssSlider.css'; -export default function GlobalCSSSlider() { +export default function GlobalCssSlider() { return ; } ``` From be6ee9af5883afd84b5bb435fabf846ca84a5c92 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:49:23 +0200 Subject: [PATCH 64/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 6f1bde734f52fa..1f87f7534f5157 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -68,7 +68,7 @@ const cache = createCache({ container: emotionContainer, }); -export default function App() { +export default function PlainCssPriority() { return ( {/* Your component tree. Now you can override Material-UI's styles. */} From 86076371e3de45ea83fe0e06ad119384febf1ded Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:51:27 +0200 Subject: [PATCH 65/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Olivier Tassinari --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 1f87f7534f5157..daaeffae3b0c68 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -164,7 +164,7 @@ export default function GlobalCssSlider() { ### Change the default styled engine By default the Material-UI components, comes with emotion as their style engine. However, -if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components/README.md). +if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). After the style engine is configured properly, you can use the `experimentalStyled()` utility from `@material-ui/core/styles` and have direct access to the theme. From 001419337db597ffc0c83f531593bdbcdae27fa3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 11:55:44 +0200 Subject: [PATCH 66/96] specified emotion in the demo --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index daaeffae3b0c68..88184b603645b4 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -50,7 +50,7 @@ export default function PlainCssSlider() { ### Controlling priority ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order, as in the demo: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here is a demo of how it can be done for our default styled engine - emotion: ```jsx import * as React from 'react'; From a87f9061851c91d66695f5858f94acd04c5149cb Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:24:38 +0200 Subject: [PATCH 67/96] updated global css guide --- .../interoperability/interoperability.md | 71 +++++++++++++++++-- 1 file changed, 67 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 88184b603645b4..09e841db38be26 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -81,8 +81,8 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -However, the thumb is not the root element of Slider and therefore customization as above will not work. -You need to use the `componentProps` API of Material-UI, in order to provide custom class names for the slots. +In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -132,6 +132,69 @@ Explicitly providing the class names to the component is too much effort? **GlobalCssSlider.css** +```css +.MuiSlider-root { + color: #20b2aa; +} +.MuiSlider-root:hover { + color: #2e8b57; +} +``` + +**GlobalCssSlider.js** + +```jsx +import * as React from 'react'; +import Slider from '@material-ui/lab/SliderStyled'; +import './GlobalCssSlider.css'; + +export default function GlobalCssSlider() { + return ; +} +``` + +### Controlling priority ⚠️ + +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here is a demo of how it can be done for our default styled engine - emotion: + +```jsx +import * as React from 'react'; +import { CacheProvider } from '@emotion/core'; +import createCache from '@emotion/cache'; + +const head = document.getElementsByTagName('head')[0]; + +const emotionContainer = head.insertBefore( + document.createElement('STYLE'), + head.firstChild, +); + +const cache = createCache({ + container: emotionContainer, +}); + +export default function PlainCssPriority() { + return ( + + {/* Your component tree. Now you can override Material-UI's styles. */} + + ); +} +``` + +### Deeper elements + +If you attempt to style the Slider, +you will likely need to affect some of the Slider's child elements, for example the thumb. +In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +to do the same. + +The following example overrides the `MuiSlider-thumb` style of `Slider` in addition to the custom styles on the slider itself. + +{{"demo": "pages/guides/interoperability/StyledComponentsDeep.js", "hideToolbar": true}} + +**GlobalCssSliderDeep.css** + ```css .MuiSlider-root { color: #20b2aa; @@ -144,12 +207,12 @@ Explicitly providing the class names to the component is too much effort? } ``` -**GlobalCssButton.js** +**GlobalCssSliderDeep.js** ```jsx import * as React from 'react'; import Slider from '@material-ui/lab/SliderStyled'; -import './GlobalCssSlider.css'; +import './GlobalCssSliderDeep.css'; export default function GlobalCssSlider() { return ; From 9ae4d6dd219f0972e1cbf0604ba828c2c14aace4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:28:02 +0200 Subject: [PATCH 68/96] Updated all depeer elements sections --- .../src/pages/guides/interoperability/interoperability.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 09e841db38be26..691a708b5afb11 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -257,8 +257,8 @@ export default function StyledComponents() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -However, the thumb is not the root element of Slider and therefore styled-components customization as above will not work. -You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. +In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -445,8 +445,8 @@ export default function App() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -However, the thumb is not the root element of Slider and therefore customization as above will not work. -You need to use the `componentProps` API of Material-UI, in order to provide custom classNames for the slots. +In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 8e9a790ccac0d2ba9815359434b6a7e835ddabd5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:31:51 +0200 Subject: [PATCH 69/96] cleanups --- docs/src/pages/guides/interoperability/interoperability.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 691a708b5afb11..46f7cfdb982caf 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -258,7 +258,7 @@ export default function StyledComponents() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need -to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. +to do the same. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -279,7 +279,7 @@ const CustomizedSliderDeep = styled(Slider)` } `; -export default function App() { +export default function CustomizedSliderDeepDemo() { return (
@@ -432,7 +432,7 @@ const cache = createCache({ container: emotionContainer, }); -export default function App() { +export default function CssModulesPriority() { return ( {/* Your component tree. Now you can override Material-UI's styles. */} From d9489fcf51fe55b543800e00273a738f917f30d6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:36:23 +0200 Subject: [PATCH 70/96] Matt's feedback --- .../src/pages/guides/interoperability/interoperability.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 46f7cfdb982caf..606cb511b06e30 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -226,8 +226,8 @@ export default function GlobalCssSlider() { ### Change the default styled engine -By default the Material-UI components, comes with emotion as their style engine. However, -if you would like to use `styled-components`, you can configure your app, by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). +By default the Material-UI components come with emotion as their style engine. If +however, you would like to use `styled-components`, you can configure your app by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). After the style engine is configured properly, you can use the `experimentalStyled()` utility from `@material-ui/core/styles` and have direct access to the theme. @@ -323,8 +323,8 @@ export default function StyledComponentsDeep() { Material-UI has a rich theme structure that you can take advantage of for color manipulations, transitions, media queries, and more. -By using the Material-UI's Provider, the theme will be available for the -context as well (emotion or styled-components, depending on your configuraiton). +By using the Material-UI ThemeProvider, the theme will be available in the theme context +of the styled engine too (emotion or styled-components, depending on your configuration). You are encouraged to share the same theme object between Material-UI and your styles. From 298eb42da97f76b4a262e19ca064e29982c313cb Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:49:50 +0200 Subject: [PATCH 71/96] changed theme syntax --- .../guides/interoperability/StyledComponentsTheme.js | 8 ++++---- .../guides/interoperability/StyledComponentsTheme.tsx | 6 ++---- .../src/pages/guides/interoperability/interoperability.md | 6 ++---- 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 9f92ca5928528e..2bb08298c51ae5 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -16,14 +16,14 @@ const customTheme = createMuiTheme({ }, }); -const CustomizedSlider = styled(Slider)` - ${({ theme }) => ` +const CustomizedSlider = styled(Slider)( + ({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } - `} -`; +`, +); export default function StyledComponentsTheme() { return ( diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 9f92ca5928528e..2dfef5a526eaf2 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -16,14 +16,12 @@ const customTheme = createMuiTheme({ }, }); -const CustomizedSlider = styled(Slider)` - ${({ theme }) => ` +const CustomizedSlider = styled(Slider)(({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } - `} -`; +`); export default function StyledComponentsTheme() { return ( diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 606cb511b06e30..5d1da42a1d0600 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -329,14 +329,12 @@ of the styled engine too (emotion or styled-components, depending on your config You are encouraged to share the same theme object between Material-UI and your styles. ```jsx -const CustomizedSlider = styled(Slider)` - ${({ theme }) => ` +const CustomizedSlider = styled(Slider)(({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } - `} -`; +`); ``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} From 69809eab6367fab634b39f23aefabf5c1890f525 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:55:07 +0200 Subject: [PATCH 72/96] theme provider wording --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 5d1da42a1d0600..cf74cb77acd42d 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -323,7 +323,7 @@ export default function StyledComponentsDeep() { Material-UI has a rich theme structure that you can take advantage of for color manipulations, transitions, media queries, and more. -By using the Material-UI ThemeProvider, the theme will be available in the theme context +By using the Material-UI theme provider, the theme will be available in the theme context of the styled engine too (emotion or styled-components, depending on your configuration). You are encouraged to share the same theme object between Material-UI and your styles. From 82ea13f28143e531984fa1fdbd201158844cfe34 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 15:59:28 +0200 Subject: [PATCH 73/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index cf74cb77acd42d..97d89e7a1d39e0 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -50,7 +50,7 @@ export default function PlainCssSlider() { ### Controlling priority ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here is a demo of how it can be done for our default styled engine - emotion: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion: ```jsx import * as React from 'react'; From afb379c499c82fefc1692c1302f9ca753a46d872 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:01:11 +0200 Subject: [PATCH 74/96] controlling priority section --- docs/src/pages/guides/interoperability/interoperability.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 97d89e7a1d39e0..1930b69e67e8fd 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -155,7 +155,7 @@ export default function GlobalCssSlider() { ### Controlling priority ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the html ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here is a demo of how it can be done for our default styled engine - emotion: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion: ```jsx import * as React from 'react'; @@ -412,7 +412,7 @@ export default function CssModulesSlider() { ### Controlling priority ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order, as in the demo: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion: ```jsx import * as React from 'react'; From b817a97cabaff005a9ab0bc07a3450dd43ac775e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:01:52 +0200 Subject: [PATCH 75/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 1930b69e67e8fd..f2b52bb2ea5a86 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -81,7 +81,7 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 2095d6ec91a2ae557a38a65f7b030f39352f372b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:03:57 +0200 Subject: [PATCH 76/96] deeper elements section --- docs/src/pages/guides/interoperability/interoperability.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index f2b52bb2ea5a86..42b50bedb69495 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -186,7 +186,7 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need to do the same. The following example overrides the `MuiSlider-thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -257,7 +257,7 @@ export default function StyledComponents() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need to do the same. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. @@ -443,7 +443,7 @@ export default function CssModulesPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. -In Material-UI, all child elements have increased specificity of 2 `.parent .child {}`. When writing overrides, the author need +In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From 5c08358fb76361c6357e90ea33f7982d3ad47ec7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:10:22 +0200 Subject: [PATCH 77/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 42b50bedb69495..b758b3546e3fe2 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -82,7 +82,7 @@ export default function PlainCssPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need -to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. +to do the same. In order to provide custom class names, you need to use the `componentProps` API. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From a0c52f224b647dc3d58bf4975ce61e4130e4ae87 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:11:09 +0200 Subject: [PATCH 78/96] componentProps section --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index b758b3546e3fe2..27ceedfff30e49 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -444,7 +444,7 @@ export default function CssModulesPriority() { If you attempt to style the Slider, you will likely need to affect some of the Slider's child elements, for example the thumb. In Material-UI, all child elements have an increased specificity of 2 `.parent .child {}`. When writing overrides, you need -to do the same. In order to provide custom class names for the slots, you need to use the `componentProps` API of Material-UI. +to do the same. In order to provide custom class names, you need to use the `componentProps` API. The following example overrides the `thumb` style of `Slider` in addition to the custom styles on the slider itself. From efed276bf532ea99db60b0f58ad3c5ced4fc92da Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:35:28 +0200 Subject: [PATCH 79/96] prettier --- .../guides/interoperability/StyledComponentsTheme.tsx | 6 ++++-- .../pages/guides/interoperability/interoperability.md | 10 ++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 2dfef5a526eaf2..2bb08298c51ae5 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -16,12 +16,14 @@ const customTheme = createMuiTheme({ }, }); -const CustomizedSlider = styled(Slider)(({ theme }) => ` +const CustomizedSlider = styled(Slider)( + ({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } -`); +`, +); export default function StyledComponentsTheme() { return ( diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 27ceedfff30e49..b312e5a2199b37 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -226,7 +226,7 @@ export default function GlobalCssSlider() { ### Change the default styled engine -By default the Material-UI components come with emotion as their style engine. If +By default the Material-UI components come with emotion as their style engine. If however, you would like to use `styled-components`, you can configure your app by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). After the style engine is configured properly, you can use the `experimentalStyled()` utility @@ -323,18 +323,20 @@ export default function StyledComponentsDeep() { Material-UI has a rich theme structure that you can take advantage of for color manipulations, transitions, media queries, and more. -By using the Material-UI theme provider, the theme will be available in the theme context +By using the Material-UI theme provider, the theme will be available in the theme context of the styled engine too (emotion or styled-components, depending on your configuration). You are encouraged to share the same theme object between Material-UI and your styles. ```jsx -const CustomizedSlider = styled(Slider)(({ theme }) => ` +const CustomizedSlider = styled(Slider)( + ({ theme }) => ` color: ${theme.palette.primary.main}; :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } -`); +`, +); ``` {{"demo": "pages/guides/interoperability/StyledComponentsTheme.js"}} From 7c6a6f020f7930f38e8a92fb1176cfb9b25d88b4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:12:05 +0200 Subject: [PATCH 80/96] Update docs/src/pages/guides/interoperability/interoperability.md Co-authored-by: Matt --- docs/src/pages/guides/interoperability/interoperability.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index b312e5a2199b37..abd08480e9ffd6 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -226,7 +226,7 @@ export default function GlobalCssSlider() { ### Change the default styled engine -By default the Material-UI components come with emotion as their style engine. If +By default, Material-UI components come with emotion as their style engine. If, however, you would like to use `styled-components`, you can configure your app by following this [example project](https://github.com/mui-org/material-ui/blob/next/examples/create-react-app-with-styled-components). After the style engine is configured properly, you can use the `experimentalStyled()` utility From 24fcc7b0715df2a70aad489a02333032554b7073 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 10:22:21 +0200 Subject: [PATCH 81/96] Olivier's comments --- .../interoperability/interoperability.md | 34 ++++--------------- 1 file changed, 7 insertions(+), 27 deletions(-) diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index abd08480e9ffd6..26234cf15d1b61 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -328,6 +328,12 @@ of the styled engine too (emotion or styled-components, depending on your config You are encouraged to share the same theme object between Material-UI and your styles. +If you are already using a custom theme with styled-components or emotion, +it might not be compatible with Material-UI's theme specification. If it's not +compatible, you need to render the Material-UI's ThemeProvider first. This will +ensure the theme structures are isolated. This is ideal for the progressive adoption +of Material-UI's components in the codebase. + ```jsx const CustomizedSlider = styled(Slider)( ({ theme }) => ` @@ -343,33 +349,7 @@ const CustomizedSlider = styled(Slider)( ### Portals -The [Portal](/components/portal/) provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. -Because of the way styled-components scopes its CSS, you may run into issues where styling is not applied. - -For example, if you attempt to style the [Menu](/components/menus/) of a [Select](/components/selects/) component using the `MenuProps` prop, -you will need to pass along the `className` prop to the element being rendered outside of it's DOM hierarchy. -The following example shows a workaround: - -```jsx -import * as React from 'react'; -import styled from 'styled-components'; -import Menu from '@material-ui/core/Menu'; -import MenuItem from '@material-ui/core/MenuItem'; - -const StyledMenu = styled(({ className, ...props }) => ( - -))` - box-shadow: none; - border: 1px solid #d3d4d5; - - li { - padding-top: 8px; - padding-bottom: 8px; - } -`; -``` - -{{"demo": "pages/guides/interoperability/StyledComponentsPortal.js"}} + ## CSS Modules From 3d794251f86bfa9dab93ae23cff66036818bb9d2 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 10:30:48 +0200 Subject: [PATCH 82/96] fixed css strings --- docs/src/pages/guides/interoperability/EmotionCSS.js | 1 + docs/src/pages/guides/interoperability/EmotionCSS.tsx | 1 + docs/src/pages/guides/interoperability/StyledComponents.js | 1 + docs/src/pages/guides/interoperability/StyledComponents.tsx | 1 + docs/src/pages/guides/interoperability/StyledComponentsDeep.js | 2 ++ docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx | 2 ++ 6 files changed, 8 insertions(+) diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js index 85a1b3be730a4a..15b43980e94abf 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.js +++ b/docs/src/pages/guides/interoperability/EmotionCSS.js @@ -11,6 +11,7 @@ export default function EmotionCSS() { defaultValue={30} css={css` color: #20b2aa; + :hover { color: #2e8b57; } diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx index 85a1b3be730a4a..15b43980e94abf 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx +++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx @@ -11,6 +11,7 @@ export default function EmotionCSS() { defaultValue={30} css={css` color: #20b2aa; + :hover { color: #2e8b57; } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js index eefb5b5f94229d..549f7bed3e92de 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.js +++ b/docs/src/pages/guides/interoperability/StyledComponents.js @@ -5,6 +5,7 @@ import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` color: #20b2aa; + :hover { color: #2e8b57; } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx index eefb5b5f94229d..549f7bed3e92de 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponents.tsx @@ -5,6 +5,7 @@ import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` color: #20b2aa; + :hover { color: #2e8b57; } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index da56c5a8b1351f..804094521a9566 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -5,9 +5,11 @@ import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` color: #20b2aa; + :hover { color: #2e8b57; } + & .MuiSlider-thumb { border-radius: 1px; } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index da56c5a8b1351f..804094521a9566 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -5,9 +5,11 @@ import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` color: #20b2aa; + :hover { color: #2e8b57; } + & .MuiSlider-thumb { border-radius: 1px; } From 969a3196b68910dfab7b6bc023610b70d82ec461 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 10:47:37 +0200 Subject: [PATCH 83/96] prettier --- docs/src/pages/guides/interoperability/EmotionCSS.js | 2 +- docs/src/pages/guides/interoperability/EmotionCSS.tsx | 2 +- docs/src/pages/guides/interoperability/StyledComponents.js | 2 +- docs/src/pages/guides/interoperability/StyledComponents.tsx | 2 +- docs/src/pages/guides/interoperability/StyledComponentsDeep.js | 2 +- docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.js b/docs/src/pages/guides/interoperability/EmotionCSS.js index 15b43980e94abf..4d68337a731a4f 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.js +++ b/docs/src/pages/guides/interoperability/EmotionCSS.js @@ -11,7 +11,7 @@ export default function EmotionCSS() { defaultValue={30} css={css` color: #20b2aa; - + :hover { color: #2e8b57; } diff --git a/docs/src/pages/guides/interoperability/EmotionCSS.tsx b/docs/src/pages/guides/interoperability/EmotionCSS.tsx index 15b43980e94abf..4d68337a731a4f 100644 --- a/docs/src/pages/guides/interoperability/EmotionCSS.tsx +++ b/docs/src/pages/guides/interoperability/EmotionCSS.tsx @@ -11,7 +11,7 @@ export default function EmotionCSS() { defaultValue={30} css={css` color: #20b2aa; - + :hover { color: #2e8b57; } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.js b/docs/src/pages/guides/interoperability/StyledComponents.js index 549f7bed3e92de..71f3d0076ace56 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.js +++ b/docs/src/pages/guides/interoperability/StyledComponents.js @@ -5,7 +5,7 @@ import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` color: #20b2aa; - + :hover { color: #2e8b57; } diff --git a/docs/src/pages/guides/interoperability/StyledComponents.tsx b/docs/src/pages/guides/interoperability/StyledComponents.tsx index 549f7bed3e92de..71f3d0076ace56 100644 --- a/docs/src/pages/guides/interoperability/StyledComponents.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponents.tsx @@ -5,7 +5,7 @@ import Box from '@material-ui/core/Box'; const SliderCustomized = styled(Slider)` color: #20b2aa; - + :hover { color: #2e8b57; } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index 804094521a9566..c2024a54abab0e 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -9,7 +9,7 @@ const SliderCustomized = styled(Slider)` :hover { color: #2e8b57; } - + & .MuiSlider-thumb { border-radius: 1px; } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index 804094521a9566..c2024a54abab0e 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -9,7 +9,7 @@ const SliderCustomized = styled(Slider)` :hover { color: #2e8b57; } - + & .MuiSlider-thumb { border-radius: 1px; } From 350ddd25263ccf868754a52bcdb8769045eef9fd Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 11:06:58 +0200 Subject: [PATCH 84/96] trigger build From f80854fe9210a4bd9d11dd694e5b3af9c3a19691 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 15 Oct 2020 20:40:16 +0200 Subject: [PATCH 85/96] small details --- .../interoperability/StyledComponentsDeep.js | 2 +- .../interoperability/StyledComponentsDeep.tsx | 2 +- .../interoperability/StyledComponentsTheme.js | 1 + .../StyledComponentsTheme.tsx | 1 + .../interoperability/interoperability.md | 186 +++++++++++++----- 5 files changed, 137 insertions(+), 55 deletions(-) diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js index c2024a54abab0e..d1f0130d956856 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.js @@ -15,7 +15,7 @@ const SliderCustomized = styled(Slider)` } `; -export default function StyledComponents() { +export default function StyledComponentsDeep() { return ( diff --git a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx index c2024a54abab0e..d1f0130d956856 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx @@ -15,7 +15,7 @@ const SliderCustomized = styled(Slider)` } `; -export default function StyledComponents() { +export default function StyledComponentsDeep() { return ( diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js index 2bb08298c51ae5..52021db7aebc59 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.js +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.js @@ -19,6 +19,7 @@ const customTheme = createMuiTheme({ const CustomizedSlider = styled(Slider)( ({ theme }) => ` color: ${theme.palette.primary.main}; + :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } diff --git a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx index 2bb08298c51ae5..52021db7aebc59 100644 --- a/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx +++ b/docs/src/pages/guides/interoperability/StyledComponentsTheme.tsx @@ -19,6 +19,7 @@ const customTheme = createMuiTheme({ const CustomizedSlider = styled(Slider)( ({ theme }) => ` color: ${theme.palette.primary.main}; + :hover { color: ${darken(theme.palette.primary.main, 0.2)}; } diff --git a/docs/src/pages/guides/interoperability/interoperability.md b/docs/src/pages/guides/interoperability/interoperability.md index 26234cf15d1b61..b1caf6d9eed2ec 100644 --- a/docs/src/pages/guides/interoperability/interoperability.md +++ b/docs/src/pages/guides/interoperability/interoperability.md @@ -26,6 +26,7 @@ Nothing fancy, just plain CSS. .slider { color: #20b2aa; } + .slider:hover { color: #2e8b57; } @@ -42,15 +43,15 @@ export default function PlainCssSlider() { return (
- +
); } ``` -### Controlling priority ⚠️ +### CSS injection order ⚠️ -**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``. If you don't want to mark style attributes with **!important**, you need to change the CSS injection order. Here's a demo of how it can be done for the default style engine - emotion: +**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which make Material-UI take precedence over your `