From 421317a3281eff437846ee654820e995404b4517 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 8 Apr 2023 14:43:52 +0530 Subject: [PATCH 01/10] docs: rename CustomizedInputs file to CustomizedInputsStyled --- .../{CustomizedInputs.js => CustomizedInputsStyled.js} | 2 +- .../{CustomizedInputs.tsx => CustomizedInputsStyled.tsx} | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename docs/data/material/components/text-fields/{CustomizedInputs.js => CustomizedInputsStyled.js} (98%) rename docs/data/material/components/text-fields/{CustomizedInputs.tsx => CustomizedInputsStyled.tsx} (98%) diff --git a/docs/data/material/components/text-fields/CustomizedInputs.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js similarity index 98% rename from docs/data/material/components/text-fields/CustomizedInputs.js rename to docs/data/material/components/text-fields/CustomizedInputsStyled.js index 13c0e325ec2bf0..659c3a764447cd 100644 --- a/docs/data/material/components/text-fields/CustomizedInputs.js +++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.js @@ -102,7 +102,7 @@ const ValidationTextField = styled(TextField)({ }, }); -export default function CustomizedInputs() { +export default function CustomizedInputsStyled() { return ( Date: Sat, 8 Apr 2023 14:46:28 +0530 Subject: [PATCH 02/10] docs: demonstrate overriding TextField styles with theme styleOverrides --- .../CustomizedInputsStyleOverrides.js | 99 +++++++++++++++++++ .../CustomizedInputsStyleOverrides.tsx | 99 +++++++++++++++++++ ...CustomizedInputsStyleOverrides.tsx.preview | 5 + .../components/text-fields/text-fields.md | 8 +- 4 files changed, 210 insertions(+), 1 deletion(-) create mode 100644 docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js create mode 100644 docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx create mode 100644 docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js new file mode 100644 index 00000000000000..d58e7f722f1ff0 --- /dev/null +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js @@ -0,0 +1,99 @@ +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import Box from '@mui/material/Box'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +const customTheme = createTheme({ + components: { + MuiTextField: { + styleOverrides: { + root: { + '--TextField-brandBorderColor': 'red', + '--TextField-brandBorderHoverColor': 'yellow', + '--TextField-brandBorderFocusedColor': 'green', + '& label.Mui-focused': { + color: 'var(--TextField-brandBorderFocusedColor)', + }, + '& input': { + color: 'white', + }, + }, + }, + }, + MuiFormLabel: { + styleOverrides: { + root: { + color: 'rgba(255, 255, 255, 0.7)', + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + borderColor: 'var(--TextField-brandBorderColor)', + }, + root: { + [`&:hover .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderHoverColor)', + }, + [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderFocusedColor)', + }, + }, + }, + }, + MuiFilledInput: { + styleOverrides: { + root: { + backgroundColor: '#2b2b2b', + '&:before, &:after': { + borderBottom: '2px solid var(--TextField-brandBorderColor)', + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + }, + }, + }, + }, + MuiInput: { + styleOverrides: { + root: { + '&:before': { + borderBottom: '2px solid var(--TextField-brandBorderColor)', + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + }, + }, + }, + }, + }, +}); + +export default function CustomizedInputsStyleOverrides() { + return ( + + + + + + + + ); +} diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx new file mode 100644 index 00000000000000..d58e7f722f1ff0 --- /dev/null +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx @@ -0,0 +1,99 @@ +import * as React from 'react'; +import TextField from '@mui/material/TextField'; +import { outlinedInputClasses } from '@mui/material/OutlinedInput'; +import Box from '@mui/material/Box'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; + +const customTheme = createTheme({ + components: { + MuiTextField: { + styleOverrides: { + root: { + '--TextField-brandBorderColor': 'red', + '--TextField-brandBorderHoverColor': 'yellow', + '--TextField-brandBorderFocusedColor': 'green', + '& label.Mui-focused': { + color: 'var(--TextField-brandBorderFocusedColor)', + }, + '& input': { + color: 'white', + }, + }, + }, + }, + MuiFormLabel: { + styleOverrides: { + root: { + color: 'rgba(255, 255, 255, 0.7)', + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + borderColor: 'var(--TextField-brandBorderColor)', + }, + root: { + [`&:hover .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderHoverColor)', + }, + [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderFocusedColor)', + }, + }, + }, + }, + MuiFilledInput: { + styleOverrides: { + root: { + backgroundColor: '#2b2b2b', + '&:before, &:after': { + borderBottom: '2px solid var(--TextField-brandBorderColor)', + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + }, + }, + }, + }, + MuiInput: { + styleOverrides: { + root: { + '&:before': { + borderBottom: '2px solid var(--TextField-brandBorderColor)', + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + }, + }, + }, + }, + }, +}); + +export default function CustomizedInputsStyleOverrides() { + return ( + + + + + + + + ); +} diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview new file mode 100644 index 00000000000000..3abca71690af51 --- /dev/null +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index dedd1f30feada4..67fd41bed3b54f 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -131,7 +131,13 @@ The `color` prop changes the highlight color of the text field when focused. Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedInputs.js"}} +### Using `styled` API: + +{{"demo": "CustomizedInputsStyled.js"}} + +### Using [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) API: + +{{"demo": "CustomizedInputsStyleOverrides.js"}} Customization does not stop at CSS. You can use composition to build custom components and give your app a unique feel. From 89c3784210d5a70da51a056c1da67b5d7cf9456a Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Sat, 8 Apr 2023 15:12:47 +0530 Subject: [PATCH 03/10] docs(TextField): remove trailing punctuation in markdown headers --- docs/data/material/components/text-fields/text-fields.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index 67fd41bed3b54f..0bd267fa7df04f 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -131,11 +131,11 @@ The `color` prop changes the highlight color of the text field when focused. Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -### Using `styled` API: +### Using `styled` API {{"demo": "CustomizedInputsStyled.js"}} -### Using [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) API: +### Using [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) API {{"demo": "CustomizedInputsStyleOverrides.js"}} From 0d5e70c7a142b74788a3ff02e489a5132e593ab1 Mon Sep 17 00:00:00 2001 From: Danilo Leal Date: Mon, 10 Apr 2023 22:23:44 -0300 Subject: [PATCH 04/10] applying copywriting style guide --- docs/data/material/components/text-fields/text-fields.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index 0bd267fa7df04f..be14a5a7b15a24 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -131,11 +131,14 @@ The `color` prop changes the highlight color of the text field when focused. Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -### Using `styled` API +### Using the styled API {{"demo": "CustomizedInputsStyled.js"}} -### Using [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) API +### Using the theme style overrides API + +Use the `styleOverrides` key to change any style injected by Material UI into the DOM. +See the [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) documentation for further details. {{"demo": "CustomizedInputsStyleOverrides.js"}} From 0de00896aee3762a4094f436fe2832860e0d8de4 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 11 Apr 2023 14:48:25 +0530 Subject: [PATCH 05/10] docs(TextField): fix TextField design in light and dark modes --- .../CustomizedInputsStyleOverrides.js | 112 ++++++++--------- .../CustomizedInputsStyleOverrides.tsx | 114 ++++++++---------- ...CustomizedInputsStyleOverrides.tsx.preview | 2 +- 3 files changed, 102 insertions(+), 126 deletions(-) diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js index d58e7f722f1ff0..1fb66caa196d9c 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js @@ -4,78 +4,69 @@ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import Box from '@mui/material/Box'; import { createTheme, ThemeProvider } from '@mui/material/styles'; -const customTheme = createTheme({ - components: { - MuiTextField: { - styleOverrides: { - root: { - '--TextField-brandBorderColor': 'red', - '--TextField-brandBorderHoverColor': 'yellow', - '--TextField-brandBorderFocusedColor': 'green', - '& label.Mui-focused': { - color: 'var(--TextField-brandBorderFocusedColor)', +const customTheme = (theme) => + createTheme({ + ...theme, + components: { + MuiTextField: { + styleOverrides: { + root: { + '--TextField-brandBorderColor': 'red', + '--TextField-brandBorderHoverColor': 'yellow', + '--TextField-brandBorderFocusedColor': 'green', + '& label.Mui-focused': { + color: 'var(--TextField-brandBorderFocusedColor)', + }, }, - '& input': { - color: 'white', - }, - }, - }, - }, - MuiFormLabel: { - styleOverrides: { - root: { - color: 'rgba(255, 255, 255, 0.7)', }, }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - borderColor: 'var(--TextField-brandBorderColor)', - }, - root: { - [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor: 'var(--TextField-brandBorderHoverColor)', + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + borderColor: 'var(--TextField-brandBorderColor)', }, - [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { - borderColor: 'var(--TextField-brandBorderFocusedColor)', + root: { + [`&:hover .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderHoverColor)', + }, + [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderFocusedColor)', + }, }, }, }, - }, - MuiFilledInput: { - styleOverrides: { - root: { - backgroundColor: '#2b2b2b', - '&:before, &:after': { - borderBottom: '2px solid var(--TextField-brandBorderColor)', - }, - '&:hover:not(.Mui-disabled, .Mui-error):before': { - borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', - }, - '&.Mui-focused:after': { - borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + MuiFilledInput: { + styleOverrides: { + root: { + '&:before, &:after': { + borderBottom: '2px solid var(--TextField-brandBorderColor)', + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + }, }, }, }, - }, - MuiInput: { - styleOverrides: { - root: { - '&:before': { - borderBottom: '2px solid var(--TextField-brandBorderColor)', - }, - '&:hover:not(.Mui-disabled, .Mui-error):before': { - borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', - }, - '&.Mui-focused:after': { - borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + MuiInput: { + styleOverrides: { + root: { + '&:before': { + borderBottom: '2px solid var(--TextField-brandBorderColor)', + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + }, }, }, }, }, - }, -}); + }); export default function CustomizedInputsStyleOverrides() { return ( @@ -84,12 +75,9 @@ export default function CustomizedInputsStyleOverrides() { display: 'flex', justifyContent: 'space-between', width: '100%', - backgroundColor: '#1A2027', - p: 2, - borderRadius: 4, }} > - + customTheme(outerTheme)}> diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx index d58e7f722f1ff0..5b38b40b236c13 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx @@ -2,80 +2,71 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import Box from '@mui/material/Box'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { createTheme, ThemeProvider, Theme } from '@mui/material/styles'; -const customTheme = createTheme({ - components: { - MuiTextField: { - styleOverrides: { - root: { - '--TextField-brandBorderColor': 'red', - '--TextField-brandBorderHoverColor': 'yellow', - '--TextField-brandBorderFocusedColor': 'green', - '& label.Mui-focused': { - color: 'var(--TextField-brandBorderFocusedColor)', +const customTheme = (theme: Theme) => + createTheme({ + ...theme, + components: { + MuiTextField: { + styleOverrides: { + root: { + '--TextField-brandBorderColor': 'red', + '--TextField-brandBorderHoverColor': 'yellow', + '--TextField-brandBorderFocusedColor': 'green', + '& label.Mui-focused': { + color: 'var(--TextField-brandBorderFocusedColor)', + }, }, - '& input': { - color: 'white', - }, - }, - }, - }, - MuiFormLabel: { - styleOverrides: { - root: { - color: 'rgba(255, 255, 255, 0.7)', }, }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - borderColor: 'var(--TextField-brandBorderColor)', - }, - root: { - [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor: 'var(--TextField-brandBorderHoverColor)', + MuiOutlinedInput: { + styleOverrides: { + notchedOutline: { + borderColor: 'var(--TextField-brandBorderColor)', }, - [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { - borderColor: 'var(--TextField-brandBorderFocusedColor)', + root: { + [`&:hover .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderHoverColor)', + }, + [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { + borderColor: 'var(--TextField-brandBorderFocusedColor)', + }, }, }, }, - }, - MuiFilledInput: { - styleOverrides: { - root: { - backgroundColor: '#2b2b2b', - '&:before, &:after': { - borderBottom: '2px solid var(--TextField-brandBorderColor)', - }, - '&:hover:not(.Mui-disabled, .Mui-error):before': { - borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', - }, - '&.Mui-focused:after': { - borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + MuiFilledInput: { + styleOverrides: { + root: { + '&:before, &:after': { + borderBottom: '2px solid var(--TextField-brandBorderColor)', + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + }, }, }, }, - }, - MuiInput: { - styleOverrides: { - root: { - '&:before': { - borderBottom: '2px solid var(--TextField-brandBorderColor)', - }, - '&:hover:not(.Mui-disabled, .Mui-error):before': { - borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', - }, - '&.Mui-focused:after': { - borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + MuiInput: { + styleOverrides: { + root: { + '&:before': { + borderBottom: '2px solid var(--TextField-brandBorderColor)', + }, + '&:hover:not(.Mui-disabled, .Mui-error):before': { + borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', + }, + '&.Mui-focused:after': { + borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', + }, }, }, }, }, - }, -}); + }); export default function CustomizedInputsStyleOverrides() { return ( @@ -84,12 +75,9 @@ export default function CustomizedInputsStyleOverrides() { display: 'flex', justifyContent: 'space-between', width: '100%', - backgroundColor: '#1A2027', - p: 2, - borderRadius: 4, }} > - + customTheme(outerTheme)}> diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview index 3abca71690af51..d8cef75408bc80 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview @@ -1,4 +1,4 @@ - + customTheme(outerTheme)}> From 7550074ab92b5deacdeaa8055e73fe044f7eb924 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 11 Apr 2023 15:08:11 +0530 Subject: [PATCH 06/10] docs(TextField): make TextField responsive in demo --- .../text-fields/CustomizedInputsStyleOverrides.js | 6 +++--- .../text-fields/CustomizedInputsStyleOverrides.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js index 1fb66caa196d9c..d335bdf0165777 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js @@ -72,9 +72,9 @@ export default function CustomizedInputsStyleOverrides() { return ( customTheme(outerTheme)}> diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx index 5b38b40b236c13..3cde6f9b16ffb1 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx @@ -72,9 +72,9 @@ export default function CustomizedInputsStyleOverrides() { return ( customTheme(outerTheme)}> From c49dd45e97be915ab11b817c396f4357fd2e91c4 Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 11 Apr 2023 15:48:40 +0530 Subject: [PATCH 07/10] docs(TextField): avoid spready full default theme and pick only mode from outer theme --- .../text-fields/CustomizedInputsStyleOverrides.js | 6 ++++-- .../text-fields/CustomizedInputsStyleOverrides.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js index d335bdf0165777..e36732306269a5 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js @@ -4,9 +4,11 @@ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import Box from '@mui/material/Box'; import { createTheme, ThemeProvider } from '@mui/material/styles'; -const customTheme = (theme) => +const customTheme = (outerTheme) => createTheme({ - ...theme, + palette: { + mode: outerTheme.palette.mode, + }, components: { MuiTextField: { styleOverrides: { diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx index 3cde6f9b16ffb1..c95c41b8285bc5 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx @@ -4,9 +4,11 @@ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import Box from '@mui/material/Box'; import { createTheme, ThemeProvider, Theme } from '@mui/material/styles'; -const customTheme = (theme: Theme) => +const customTheme = (outerTheme: Theme) => createTheme({ - ...theme, + palette: { + mode: outerTheme.palette.mode, + }, components: { MuiTextField: { styleOverrides: { From 8fb18e18ea3330473620fb1381c18ee90b0bdcfb Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Tue, 11 Apr 2023 16:23:47 +0530 Subject: [PATCH 08/10] docs(TextField): use useTheme hook to get outer theme for visual regression test to capture screenshot --- .../text-fields/CustomizedInputsStyleOverrides.js | 6 ++++-- .../text-fields/CustomizedInputsStyleOverrides.tsx | 6 ++++-- .../text-fields/CustomizedInputsStyleOverrides.tsx.preview | 2 +- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js index e36732306269a5..ec868c0284e314 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js @@ -2,7 +2,7 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import Box from '@mui/material/Box'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; +import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; const customTheme = (outerTheme) => createTheme({ @@ -71,6 +71,8 @@ const customTheme = (outerTheme) => }); export default function CustomizedInputsStyleOverrides() { + const outerTheme = useTheme(); + return ( - customTheme(outerTheme)}> + diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx index c95c41b8285bc5..69a35b786aff22 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import Box from '@mui/material/Box'; -import { createTheme, ThemeProvider, Theme } from '@mui/material/styles'; +import { createTheme, ThemeProvider, Theme, useTheme } from '@mui/material/styles'; const customTheme = (outerTheme: Theme) => createTheme({ @@ -71,6 +71,8 @@ const customTheme = (outerTheme: Theme) => }); export default function CustomizedInputsStyleOverrides() { + const outerTheme = useTheme(); + return ( - customTheme(outerTheme)}> + diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview index d8cef75408bc80..0a8fdd9694a9c3 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview @@ -1,4 +1,4 @@ - customTheme(outerTheme)}> + From a1e4616fe1384c5d26e773a4e1042845f4948223 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 2 May 2023 20:17:12 -0300 Subject: [PATCH 09/10] customize colors --- .../CustomizedInputsStyleOverrides.tsx | 6 ++-- .../text-fields/CustomizedInputsStyled.tsx | 28 ++++++++++--------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx index 69a35b786aff22..422ece51720215 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx @@ -13,9 +13,9 @@ const customTheme = (outerTheme: Theme) => MuiTextField: { styleOverrides: { root: { - '--TextField-brandBorderColor': 'red', - '--TextField-brandBorderHoverColor': 'yellow', - '--TextField-brandBorderFocusedColor': 'green', + '--TextField-brandBorderColor': '#E0E3E7', + '--TextField-brandBorderHoverColor': '#B2BAC2', + '--TextField-brandBorderFocusedColor': '#6F7E8C', '& label.Mui-focused': { color: 'var(--TextField-brandBorderFocusedColor)', }, diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx index f4693b1d1d8569..825a6b7cde9f77 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx +++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx @@ -9,20 +9,20 @@ import { OutlinedInputProps } from '@mui/material/OutlinedInput'; const CssTextField = styled(TextField)({ '& label.Mui-focused': { - color: 'green', + color: '#A0AAB4', }, '& .MuiInput-underline:after': { - borderBottomColor: 'green', + borderBottomColor: '#B2BAC2', }, '& .MuiOutlinedInput-root': { '& fieldset': { - borderColor: 'red', + borderColor: '#E0E3E7', }, '&:hover fieldset': { - borderColor: 'yellow', + borderColor: '#B2BAC2', }, '&.Mui-focused fieldset': { - borderColor: 'green', + borderColor: '#6F7E8C', }, }, }); @@ -34,8 +34,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({ '& .MuiInputBase-input': { borderRadius: 4, position: 'relative', - backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#2b2b2b', - border: '1px solid #ced4da', + backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027', + border: '1px solid', + borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843', fontSize: 16, width: 'auto', padding: '10px 12px', @@ -71,10 +72,11 @@ const RedditTextField = styled((props: TextFieldProps) => ( /> ))(({ theme }) => ({ '& .MuiFilledInput-root': { - border: '1px solid #e2e2e1', overflow: 'hidden', borderRadius: 4, - backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#2b2b2b', + backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027', + border: '1px solid', + borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843', transition: theme.transitions.create([ 'border-color', 'background-color', @@ -93,15 +95,15 @@ const RedditTextField = styled((props: TextFieldProps) => ( const ValidationTextField = styled(TextField)({ '& input:valid + fieldset': { - borderColor: 'green', - borderWidth: 2, + borderColor: '#E0E3E7', + borderWidth: 1, }, '& input:invalid + fieldset': { borderColor: 'red', - borderWidth: 2, + borderWidth: 1, }, '& input:valid:focus + fieldset': { - borderLeftWidth: 6, + borderLeftWidth: 4, padding: '4px !important', // override inline-style }, }); From 245941054d2dbe6aab5588b5b8233ef1f169faa6 Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Tue, 2 May 2023 20:17:54 -0300 Subject: [PATCH 10/10] yarn docs:typescript:formatted --- .../CustomizedInputsStyleOverrides.js | 6 ++-- .../text-fields/CustomizedInputsStyled.js | 28 ++++++++++--------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js index ec868c0284e314..e443cabe97b41a 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js +++ b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js @@ -13,9 +13,9 @@ const customTheme = (outerTheme) => MuiTextField: { styleOverrides: { root: { - '--TextField-brandBorderColor': 'red', - '--TextField-brandBorderHoverColor': 'yellow', - '--TextField-brandBorderFocusedColor': 'green', + '--TextField-brandBorderColor': '#E0E3E7', + '--TextField-brandBorderHoverColor': '#B2BAC2', + '--TextField-brandBorderFocusedColor': '#6F7E8C', '& label.Mui-focused': { color: 'var(--TextField-brandBorderFocusedColor)', }, diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js index 659c3a764447cd..70306371e8e40e 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyled.js +++ b/docs/data/material/components/text-fields/CustomizedInputsStyled.js @@ -8,20 +8,20 @@ import FormControl from '@mui/material/FormControl'; const CssTextField = styled(TextField)({ '& label.Mui-focused': { - color: 'green', + color: '#A0AAB4', }, '& .MuiInput-underline:after': { - borderBottomColor: 'green', + borderBottomColor: '#B2BAC2', }, '& .MuiOutlinedInput-root': { '& fieldset': { - borderColor: 'red', + borderColor: '#E0E3E7', }, '&:hover fieldset': { - borderColor: 'yellow', + borderColor: '#B2BAC2', }, '&.Mui-focused fieldset': { - borderColor: 'green', + borderColor: '#6F7E8C', }, }, }); @@ -33,8 +33,9 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({ '& .MuiInputBase-input': { borderRadius: 4, position: 'relative', - backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#2b2b2b', - border: '1px solid #ced4da', + backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027', + border: '1px solid', + borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843', fontSize: 16, width: 'auto', padding: '10px 12px', @@ -67,10 +68,11 @@ const RedditTextField = styled((props) => ( ))(({ theme }) => ({ '& .MuiFilledInput-root': { - border: '1px solid #e2e2e1', overflow: 'hidden', borderRadius: 4, - backgroundColor: theme.palette.mode === 'light' ? '#fcfcfb' : '#2b2b2b', + backgroundColor: theme.palette.mode === 'light' ? '#F3F6F9' : '#1A2027', + border: '1px solid', + borderColor: theme.palette.mode === 'light' ? '#E0E3E7' : '#2D3843', transition: theme.transitions.create([ 'border-color', 'background-color', @@ -89,15 +91,15 @@ const RedditTextField = styled((props) => ( const ValidationTextField = styled(TextField)({ '& input:valid + fieldset': { - borderColor: 'green', - borderWidth: 2, + borderColor: '#E0E3E7', + borderWidth: 1, }, '& input:invalid + fieldset': { borderColor: 'red', - borderWidth: 2, + borderWidth: 1, }, '& input:valid:focus + fieldset': { - borderLeftWidth: 6, + borderLeftWidth: 4, padding: '4px !important', // override inline-style }, });