-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Interoperability guide updates (#23030)
- Loading branch information
Showing
11 changed files
with
453 additions
and
516 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,22 @@ | ||
| /** @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 ( | ||
| <div> | ||
| <Button>Default</Button> | ||
| <Button | ||
| <Box width={300}> | ||
| <Slider defaultValue={30} /> | ||
| <Slider | ||
| defaultValue={30} | ||
| css={css` | ||
| 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; | ||
| color: #20b2aa; | ||
| &:hover { | ||
| background-color: #5469d4; | ||
| :hover { | ||
| color: #2e8b57; | ||
| } | ||
| `} | ||
| > | ||
| Customized | ||
| </Button> | ||
| </div> | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,22 @@ | ||
| /** @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 ( | ||
| <div> | ||
| <Button>Default</Button> | ||
| <Button | ||
| <Box width={300}> | ||
| <Slider defaultValue={30} /> | ||
| <Slider | ||
| defaultValue={30} | ||
| css={css` | ||
| 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; | ||
| color: #20b2aa; | ||
| &:hover { | ||
| background-color: #5469d4; | ||
| :hover { | ||
| color: #2e8b57; | ||
| } | ||
| `} | ||
| > | ||
| Customized | ||
| </Button> | ||
| </div> | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
25 changes: 11 additions & 14 deletions
25
docs/src/pages/guides/interoperability/StyledComponents.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,21 @@ | ||
| 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; | ||
| const SliderCustomized = styled(Slider)` | ||
| color: #20b2aa; | ||
| &:hover { | ||
| background-color: #5469d4; | ||
| :hover { | ||
| color: #2e8b57; | ||
| } | ||
| `; | ||
|
|
||
| export default function StyledComponents() { | ||
| return ( | ||
| <NoSsr> | ||
| <Button>Default</Button> | ||
| <StyledButton>Customized</StyledButton> | ||
| </NoSsr> | ||
| <Box width={300}> | ||
| <Slider defaultValue={30} /> | ||
| <SliderCustomized defaultValue={30} /> | ||
| </Box> | ||
| ); | ||
| } |
25 changes: 11 additions & 14 deletions
25
docs/src/pages/guides/interoperability/StyledComponents.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,21 @@ | ||
| 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; | ||
| const SliderCustomized = styled(Slider)` | ||
| color: #20b2aa; | ||
| &:hover { | ||
| background-color: #5469d4; | ||
| :hover { | ||
| color: #2e8b57; | ||
| } | ||
| `; | ||
|
|
||
| export default function StyledComponents() { | ||
| return ( | ||
| <NoSsr> | ||
| <Button>Default</Button> | ||
| <StyledButton>Customized</StyledButton> | ||
| </NoSsr> | ||
| <Box width={300}> | ||
| <Slider defaultValue={30} /> | ||
| <SliderCustomized defaultValue={30} /> | ||
| </Box> | ||
| ); | ||
| } |
28 changes: 13 additions & 15 deletions
28
docs/src/pages/guides/interoperability/StyledComponentsDeep.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,25 @@ | ||
| 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; | ||
| const SliderCustomized = styled(Slider)` | ||
| color: #20b2aa; | ||
| &:hover { | ||
| background-color: #5469d4; | ||
| :hover { | ||
| color: #2e8b57; | ||
| } | ||
| & .MuiButton-label { | ||
| color: #fff; | ||
| & .MuiSlider-thumb { | ||
| border-radius: 1px; | ||
| } | ||
| `; | ||
|
|
||
| export default function StyledComponentsDeep() { | ||
| return ( | ||
| <NoSsr> | ||
| <Button>Default</Button> | ||
| <StyledButton>Customized</StyledButton> | ||
| </NoSsr> | ||
| <Box width={300}> | ||
| <Slider defaultValue={30} /> | ||
| <SliderCustomized defaultValue={30} /> | ||
| </Box> | ||
| ); | ||
| } |
28 changes: 13 additions & 15 deletions
28
docs/src/pages/guides/interoperability/StyledComponentsDeep.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,25 @@ | ||
| 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; | ||
| const SliderCustomized = styled(Slider)` | ||
| color: #20b2aa; | ||
| &:hover { | ||
| background-color: #5469d4; | ||
| :hover { | ||
| color: #2e8b57; | ||
| } | ||
| & .MuiButton-label { | ||
| color: #fff; | ||
| & .MuiSlider-thumb { | ||
| border-radius: 1px; | ||
| } | ||
| `; | ||
|
|
||
| export default function StyledComponentsDeep() { | ||
| return ( | ||
| <NoSsr> | ||
| <Button>Default</Button> | ||
| <StyledButton>Customized</StyledButton> | ||
| </NoSsr> | ||
| <Box width={300}> | ||
| <Slider defaultValue={30} /> | ||
| <SliderCustomized defaultValue={30} /> | ||
| </Box> | ||
| ); | ||
| } |
46 changes: 18 additions & 28 deletions
46
docs/src/pages/guides/interoperability/StyledComponentsTheme.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,37 @@ | ||
| import * as React from 'react'; | ||
| import styled, { ThemeProvider } from 'styled-components'; | ||
| import NoSsr from '@material-ui/core/NoSsr'; | ||
| import { | ||
| createMuiTheme, | ||
| ThemeProvider as MuiThemeProvider, | ||
| experimentalStyled as styled, | ||
| ThemeProvider, | ||
| 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)` | ||
| ${({ 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; | ||
| const CustomizedSlider = styled(Slider)( | ||
| ({ theme }) => ` | ||
| color: ${theme.palette.primary.main}; | ||
| :hover { | ||
| color: ${darken(theme.palette.primary.main, 0.2)}; | ||
| } | ||
| `} | ||
| `; | ||
| `, | ||
| ); | ||
|
|
||
| export default function StyledComponentsTheme() { | ||
| return ( | ||
| <NoSsr> | ||
| <MuiThemeProvider theme={customTheme}> | ||
| <ThemeProvider theme={customTheme}> | ||
| <Button>Default</Button> | ||
| <StyledButton>Customized</StyledButton> | ||
| </ThemeProvider> | ||
| </MuiThemeProvider> | ||
| </NoSsr> | ||
| <Box width={300}> | ||
| <ThemeProvider theme={customTheme}> | ||
| <CustomizedSlider defaultValue={30} /> | ||
| </ThemeProvider> | ||
| </Box> | ||
| ); | ||
| } |
Oops, something went wrong.