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

Jump to bottom

[docs] Demonstrate TextField customization using theme style overrides #36805

Merged
merged 12 commits into from
May 8, 2023
Merged

[docs] Demonstrate TextField customization using theme style overrides #36805

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
421317a
docs: rename CustomizedInputs file to CustomizedInputsStyled
ZeeshanTamboli Apr 8, 2023
3da3015
docs: demonstrate overriding TextField styles with theme styleOverrides
ZeeshanTamboli Apr 8, 2023
bf0740c
Merge branch 'master' into demonstrate-text-field-customization-theme…
ZeeshanTamboli Apr 8, 2023
89c3784
docs(TextField): remove trailing punctuation in markdown headers
ZeeshanTamboli Apr 8, 2023
0d5e70c
applying copywriting style guide
danilo-leal Apr 11, 2023
0de0089
docs(TextField): fix TextField design in light and dark modes
ZeeshanTamboli Apr 11, 2023
7550074
docs(TextField): make TextField responsive in demo
ZeeshanTamboli Apr 11, 2023
c49dd45
docs(TextField): avoid spready full default theme and pick only mode …
ZeeshanTamboli Apr 11, 2023
8fb18e1
docs(TextField): use useTheme hook to get outer theme for visual regr…
ZeeshanTamboli Apr 11, 2023
a1e4616
customize colors
danilo-leal May 2, 2023
2459410
yarn docs:typescript:formatted
danilo-leal May 2, 2023
a543176
Merge branch 'master' into demonstrate-text-field-customization-theme…
ZeeshanTamboli May 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
99 changes: 99 additions & 0 deletions docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
backgroundColor: '#1A2027',
p: 2,
borderRadius: 4,
}}
>
<ThemeProvider theme={customTheme}>
<TextField label="Outlined" />
<TextField label="Filled" variant="filled" />
<TextField label="Standard" variant="standard" />
</ThemeProvider>
</Box>
);
}
99 changes: 99 additions & 0 deletions docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
width: '100%',
backgroundColor: '#1A2027',
p: 2,
borderRadius: 4,
}}
>
<ThemeProvider theme={customTheme}>
<TextField label="Outlined" />
<TextField label="Filled" variant="filled" />
<TextField label="Standard" variant="standard" />
</ThemeProvider>
</Box>
);
}
5 changes: 5 additions & 0 deletions docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<ThemeProvider theme={customTheme}>
<TextField label="Outlined" />
<TextField label="Filled" variant="filled" />
<TextField label="Standard" variant="standard" />
</ThemeProvider>
2 changes: 1 addition & 1 deletion ...omponents/text-fields/CustomizedInputs.js → ...nts/text-fields/CustomizedInputsStyled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ const ValidationTextField = styled(TextField)({
},
});

export default function CustomizedInputs() {
export default function CustomizedInputsStyled() {
return (
<Box
component="form"
Expand Down
2 changes: 1 addition & 1 deletion ...mponents/text-fields/CustomizedInputs.tsx → ...ts/text-fields/CustomizedInputsStyled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const ValidationTextField = styled(TextField)({
},
});

export default function CustomizedInputs() {
export default function CustomizedInputsStyled() {
return (
<Box
component="form"
Expand Down
11 changes: 10 additions & 1 deletion docs/data/material/components/text-fields/text-fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,16 @@ 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 the styled API

{{"demo": "CustomizedInputsStyled.js"}}

### 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"}}

Customization does not stop at CSS.
You can use composition to build custom components and give your app a unique feel.
Expand Down