本文整理汇总了TypeScript中@material-ui/core/styles.createMuiTheme函数的典型用法代码示例。如果您正苦于以下问题：TypeScript createMuiTheme函数的具体用法？TypeScript createMuiTheme怎么用？TypeScript createMuiTheme使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了createMuiTheme函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: createMuiTheme
(selectedTheme: string, dark: boolean): Theme => {
const type = dark ? 'dark' : 'light'
const options = themes.get(selectedTheme) || pinkTheme
return createMuiTheme({
...options,
palette: {
...options.palette,
type
}
})
}示例2: default
export default (nightMode: boolean) => {
return createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
type: nightMode ? 'dark' : 'light',
primary: {
main: '#424242'
},
secondary: {
main: '#616161'
}
},
});
};示例3: createMuiTheme
export const MuiTheme = createMuiTheme({
palette: {
primary: {
main: theme.colors.PRIMARY_MAIN,
light: theme.colors.PRIMARY_LIGHT,
dark: theme.colors.PRIMARY_DARK,
contrastText: theme.colors.WHITE
},
secondary: {
main: theme.colors.SECONDARY_MAIN,
light: theme.colors.SECONDARY_LIGHT,
dark: theme.colors.SECONDARY_DARK,
contrastText: theme.colors.WHITE
}
},
overrides: {
MuiInput: {
root: {
fontSize: '14px'
},
underline: {
'&:before': {
borderBottomColor: 'rgba(0, 0, 0, .12) !important'
}
},
disabled: {
color: 'gainsboro'
}
},
MuiInputBase: {
root: {
'&$disabled': {
color: theme.colors.BLACK_60
}
}
},
MuiFormControlLabel: {
label: {
fontSize: '14px',
color: theme.colors.BLACK_60
}
},
MuiFormLabel: {
root: {
'fontSize': '14px',
'color': theme.colors.BLACK_60,
'&$disabled': {
color: theme.colors.BLACK_60
}
}
},
MuiDialogTitle: {
root: {
background: theme.colors.PRIMARY_MAIN,
padding: '0 24px 0',
color: theme.colors.WHITE,
fontSize: '20px',
height: '40px',
display: 'flex',
alignItems: 'center'
}
},
MuiDialogContent: {
root: {
padding: '24px',
minWidth: '250px',
maxHeight: '60vh'
}
},
MuiDialog: {
paper: {
background: '#fafafa'
},
paperFullScreen: {
maxWidth: 'calc(100% - 96px)',
maxHeight: 'calc(100% - 96px)',
borderRadius: '4px'
}
},
MuiSelect: {
root: {
fontSize: '14px',
color: theme.colors.BLACK_60
}
},
MuiTab: {
root: {
minWidth: '0 !important'
}
},
MuiMenuItem: {
root: {
fontSize: '14px',
color: theme.colors.BLACK_60
}
},
MuiSnackbarContent: {
root: {
backgroundColor: theme.colors.PRIMARY_MAIN,
color: theme.colors.WHITE_87
//.........这里部分代码省略.........
示例4: createMuiTheme
import { createMuiTheme } from '@material-ui/core/styles';
import { MuiThemeProviderProps } from '@material-ui/core/styles/MuiThemeProvider';
import { createGenerateClassName } from '@material-ui/styles';
import { GenerateClassName, SheetsRegistry } from 'jss';
// A theme with custom primary and secondary color.
// It's optional.
const theme = createMuiTheme({
palette: {
primary: {
light: purple[300],
main: purple[500],
dark: purple[700],
},
secondary: {
light: green[300],
main: green[500],
dark: green[700],
},
},
typography: {
useNextVariants: true,
},
});
export interface PageContext extends MuiThemeProviderProps {
generateClassName: GenerateClassName<string>; // not sure what goes here
sheetsRegistry: SheetsRegistry;
}
export default function(): PageContext {示例5: createMuiTheme
import { createMuiTheme, Theme } from '@material-ui/core/styles';
export default createMuiTheme({
palette: {
primary: {
light: '#757ce8',
main: '#3f50b5',
dark: '#002884',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
},
}) as Theme;示例6: createMuiTheme
export default createMuiTheme({
overrides: {
MuiButton: {
label: {
fontWeight: 600
},
root: {
"& svg": {
marginLeft: 8
},
borderRadius: 8
}
},
MuiCard: {
root: {
borderRadius: 8
}
},
MuiInput: {
input: {
"&:-webkit-autofill": {
boxShadow: "inset 0 0 0px 9999px #EFF8F2"
}
},
root: {
color: "#616161",
fontSize: "0.875rem"
},
underline: {
"&:after": {
borderBottomColor: primary
}
}
},
MuiInputLabel: {
formControl: {
transform: "translate(0, 1.5px) scale(0.75)",
transformOrigin: "top left" as "top left",
width: "100%"
},
root: {
color: [[primary], "!important"] as any
},
shrink: {
// Negates x0.75 scale
width: "133%"
}
},
MuiMenu: {
paper: {
borderRadius: 8
}
},
MuiSwitch: {
bar: {
"$colorPrimary$checked + &": {
backgroundColor: primary
},
backgroundColor: error,
borderRadius: 12,
height: 24,
marginTop: -12,
opacity: [["1"], "!important"] as any,
width: 48
},
checked: {
transform: "translateX(24px)"
},
icon: {
backgroundColor: "#ffffff",
boxShadow: "none",
marginLeft: 4
},
iconChecked: {
boxShadow: "none"
}
},
MuiTableCell: {
body: {
color: "#616161"
},
head: {
color: "#616161",
fontSize: ".875rem",
fontWeight: 600
},
root: {
"&:first-child": {
paddingLeft: 24 + "px",
textAlign: "left" as "left"
},
paddingLeft: 0,
textAlign: "center" as "center"
}
},
MuiTableRow: {
footer: {
"$root$hover&:hover": {
background: "none"
}
//.........这里部分代码省略.........
示例7: default
export default (colors: IThemeColors): Theme =>
createMuiTheme({
overrides: {
MuiButton: {
contained: {
"&$disabled": {
backgroundColor: fade(colors.primary, 0.12)
}
},
label: {
fontWeight: 600
},
root: {
"& svg": {
marginLeft: 8
},
borderRadius: 8
}
},
MuiCard: {
root: {
borderColor: colors.paperBorder,
borderRadius: 8,
boxShadow: "none"
}
},
MuiCardActions: {
root: {
flexDirection: "row-reverse" as "row-reverse"
}
},
MuiInput: {
input: {
"&:-webkit-autofill": {
boxShadow: `inset 0 0 0px 9999px ${colors.autofill}`
},
"&::placeholder": {
opacity: "initial !important" as "initial"
}
},
underline: {
"&:after": {
borderBottomColor: colors.primary
}
}
},
MuiInputBase: {
input: {
"&::placeholder": {
color: colors.font.gray
}
}
},
MuiInputLabel: {
formControl: {
transform: "translate(0, 1.5px) scale(0.75)",
transformOrigin: "top left" as "top left",
width: "100%"
},
root: {
color: [[colors.primary], "!important"] as any
},
shrink: {
// Negates x0.75 scale
width: "133%"
}
},
MuiMenu: {
paper: {
borderRadius: 8
}
},
MuiSwitch: {
bar: {
"$colorPrimary$checked + &": {
backgroundColor: colors.primary
},
backgroundColor: colors.gray.default,
borderRadius: 12,
height: 24,
marginTop: -12,
opacity: [["1"], "!important"] as any,
width: 48
},
checked: {
transform: "translateX(24px)"
},
disabled: {
"&$switchBase": {
"& + $bar": {
backgroundColor: colors.gray.disabled
}
}
},
icon: {
backgroundColor: colors.background.paper,
boxShadow: "none",
marginLeft: 4
},
//.........这里部分代码省略.........
示例8: createMuiTheme
import { createMuiTheme, Theme } from "@material-ui/core/styles";
const theme: Theme = createMuiTheme({
palette: {
primary: {
main: "#B8733E",
contrastText: "#FFF",
},
},
overrides: {
MuiPaper: {
elevation2: {
// paper elevation depth is 2 by default and it cannot be changed
// therefore let's set elevation2 to same as elevation4
boxShadow: "0px 2px 4px -1px rgba(40, 40, 40, 0.2),0px 4px 5px 0px rgba(40, 40, 40, 0.14),0px 1px 10px 0px rgba(40, 40, 40, 0.12)",
},
},
},
});
export default createMuiTheme(theme);
示例9: createMuiTheme
import { createMuiTheme } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import brown from '@material-ui/core/colors/brown';
export const theme = createMuiTheme({
palette: {
primary: green,
secondary: brown
}
});
export type Theme = typeof theme;
示例10: createTheme
export function createTheme(
theme: 'white' | 'dark',
): {theme: Theme; muiTheme: MuiTheme} {
if (theme === 'white') {
return {
theme: {
dark: false,
primary: purple[500],
accent: teal[500],
background: {
light: grey[100],
somewhatLight: grey[200],
main: 'white',
dark: grey[500],
text: 'rgba(0, 0, 0, 0.87)',
textLight: 'rgba(0, 0, 0, 0.5)',
textDisabled: 'rgba(0, 0, 0, 0.3)',
},
},
muiTheme: createMuiTheme({
palette: {
primary: {
light: purple[100],
main: purple[500],
dark: purple[700],
contrastText: '#fff',
},
secondary: {
light: teal[100],
main: teal[500],
dark: teal[700],
contrastText: '#fff',
},
},
}),
}
} else {
return {
theme: {
dark: true,
primary: '#00796B',
accent: '#D81B60',
background: {
light: '#607D8B',
somewhatLight: 'hsl(200, 18%, 43%)',
main: '#455A64',
dark: '#263238',
text: '#fff',
textLight: 'rgba(255, 255, 255, 0.7)',
textDisabled: 'rgba(255, 255, 255, 0.38)',
},
},
muiTheme: createMuiTheme({
palette: {
type: 'dark',
primary: {
light: '#B2DFDB',
main: '#00796B',
dark: '#004D40',
contrastText: '#fff',
},
secondary: {
light: '#F8BBD0',
main: '#D81B60',
dark: '#880E4F',
contrastText: '#000',
},
},
}),
}
}
}