Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Use slot variants over theme.variants #42614

Merged
merged 14 commits into from
Jul 24, 2024
Merged

[docs] Use slot variants over theme.variants #42614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b657b6e
update docs to use slot variants
siriwatknp Jun 11, 2024
296e0b7
fix types
siriwatknp Jun 11, 2024
2c1e5ed
Merge branch 'next' of https://github.com/mui/material-ui into docs/t…
siriwatknp Jun 14, 2024
882f351
update docs
siriwatknp Jun 14, 2024
8953193
run pnpm install
siriwatknp Jun 14, 2024
e287193
update content
siriwatknp Jun 17, 2024
dcd482e
fix non-breaking space
siriwatknp Jun 17, 2024
a8afc7f
Merge branch 'next' of https://github.com/mui/material-ui into docs/t…
siriwatknp Jun 26, 2024
6312f67
run docs:ts:format
siriwatknp Jun 26, 2024
59b1bc0
fix docs
siriwatknp Jul 23, 2024
787f315
Merge branch 'next' of https://github.com/mui/material-ui into docs/t…
siriwatknp Jul 23, 2024
56a7f0e
fix as suggested
siriwatknp Jul 23, 2024
f212b09
Apply suggestions from code review
siriwatknp Jul 23, 2024
7814913
fix link
siriwatknp Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 0 additions & 54 deletions docs/data/material/customization/theme-components/GlobalThemeOverrideCallback.js
View file
Open in desktop

This file was deleted.

54 changes: 0 additions & 54 deletions docs/data/material/customization/theme-components/GlobalThemeOverrideCallback.tsx
View file
Open in desktop

This file was deleted.

66 changes: 34 additions & 32 deletions docs/data/material/customization/theme-components/GlobalThemeVariants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,49 @@ import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';

const defaultTheme = createTheme();

const theme = createTheme({
const customTheme = createTheme({
components: {
MuiButton: {
variants: [
{
props: { variant: 'dashed' },
style: {
textTransform: 'none',
border: `2px dashed ${defaultTheme.palette.primary.main}`,
color: defaultTheme.palette.primary.main,
},
},
{
props: { variant: 'dashed', color: 'secondary' },
style: {
border: `2px dashed ${defaultTheme.palette.secondary.main}`,
color: defaultTheme.palette.secondary.main,
},
},
{
props: { variant: 'dashed', size: 'large' },
style: {
borderWidth: 4,
},
},
{
props: { variant: 'dashed', color: 'secondary', size: 'large' },
style: {
fontSize: 18,
},
styleOverrides: {
root: {
variants: [
{
props: { variant: 'dashed' },
style: ({ theme }) => ({
textTransform: 'none',
border: `2px dashed ${theme.palette.primary.main}`,
color: theme.palette.primary.main,
}),
},
{
props: { variant: 'dashed', color: 'secondary' },
style: ({ theme }) => ({
border: `2px dashed ${theme.palette.secondary.main}`,
color: theme.palette.secondary.main,
}),
},
{
props: { variant: 'dashed', size: 'large' },
style: {
borderWidth: 4,
},
},
{
props: { variant: 'dashed', color: 'secondary', size: 'large' },
style: {
fontSize: 18,
},
},
],
},
],
},
},
},
});

export default function GlobalThemeVariants() {
return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={customTheme}>
<Button variant="dashed" sx={{ m: 1 }}>
Dashed
</Button>
Expand Down
66 changes: 34 additions & 32 deletions docs/data/material/customization/theme-components/GlobalThemeVariants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,49 @@ declare module '@mui/material/Button' {
}
}

const defaultTheme = createTheme();

const theme = createTheme({
const customTheme = createTheme({
components: {
MuiButton: {
variants: [
{
props: { variant: 'dashed' },
style: {
textTransform: 'none',
border: `2px dashed ${defaultTheme.palette.primary.main}`,
color: defaultTheme.palette.primary.main,
},
},
{
props: { variant: 'dashed', color: 'secondary' },
style: {
border: `2px dashed ${defaultTheme.palette.secondary.main}`,
color: defaultTheme.palette.secondary.main,
},
},
{
props: { variant: 'dashed', size: 'large' },
style: {
borderWidth: 4,
},
},
{
props: { variant: 'dashed', color: 'secondary', size: 'large' },
style: {
fontSize: 18,
},
styleOverrides: {
root: {
variants: [
{
props: { variant: 'dashed' },
style: ({ theme }) => ({
textTransform: 'none',
border: `2px dashed ${theme.palette.primary.main}`,
color: theme.palette.primary.main,
}),
},
{
props: { variant: 'dashed', color: 'secondary' },
style: ({ theme }) => ({
border: `2px dashed ${theme.palette.secondary.main}`,
color: theme.palette.secondary.main,
}),
},
{
props: { variant: 'dashed', size: 'large' },
style: {
borderWidth: 4,
},
},
{
props: { variant: 'dashed', color: 'secondary', size: 'large' },
style: {
fontSize: 18,
},
},
],
},
],
},
},
},
});

export default function GlobalThemeVariants() {
return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={customTheme}>
<Button variant="dashed" sx={{ m: 1 }}>
Dashed
</Button>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/customization/theme-components/GlobalThemeVariants.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<ThemeProvider theme={theme}>
<ThemeProvider theme={customTheme}>
<Button variant="dashed" sx={{ m: 1 }}>
Dashed
</Button>
Expand Down
Loading
Loading