@ozo/react-rock
Version:
React 移动端开发脚手架，基于CRA3，通用、开箱即用。
313 lines (310 loc) • 9.3 kB
JavaScript
// rewireTheme.js 重载 MaterialUI 样式
import uniThemeVars from '@theme/variables';
const themeVars = {
...uniThemeVars,
// 布局上下留白
'$layout-padding-tb': '14px',
// 布局左右留白
'$layout-padding-lr': '20px',
// 列表项最小高度
'$list-item-min-height': '48px',
// 列表项secondaryAction右留白宽度
'$list-item-secondaryAction-padding-right': '44px',
// 按钮：小
'$btn-size-s-height': '32px',
'$btn-size-s-font': '13px',
// 按钮：大
'$btn-size-l-height': '40px',
'$btn-size-l-font': '14px',
};
export default {
breakpoints: {
keys: {
0: 'xs',
1: 'sm',
2: 'md',
3: 'lg',
4: 'xl',
5: 'tablet',
6: 'laptop',
7: 'desktop',
},
values: {
xs: 0,
sm: 320,
md: 375,
lg: 414,
xl: 640,
tablet: 768,
laptop: 1024,
desktop: 1920,
},
},
palette: {
primary: {
light: themeVars['$color-brand1-1'],
main: themeVars['$color-brand1-6'],
dark: themeVars['$color-brand1-9'],
contrastText: themeVars['$color-text1-5'],
},
secondary: {
light: themeVars['$color-error-2'],
main: themeVars['$color-error-3'],
dark: themeVars['$color-error-4'],
contrastText: themeVars['$color-text1-4'],
},
background: {
default: themeVars['$color-fill1-1'],
},
text: {
primary: themeVars['$color-text1-4'],
secondary: themeVars['$color-text1-3'],
disabled: themeVars['$color-text1-1'],
},
divider: themeVars['$color-line1-1'],
action: {
disabled: themeVars['$color-white'],
disabledBackground: themeVars['$color-fill1-4'],
},
},
typography: {
fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
h1: {
fontSize: themeVars['$font-size-display-2'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
fontWeight: 400,
},
h2: {
fontSize: themeVars['$font-size-display-1'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
fontWeight: 400,
},
h3: {
fontSize: themeVars['$font-size-headline'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
fontWeight: 400,
},
h4: {
fontSize: themeVars['$font-size-subhead'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
fontWeight: 400,
},
h5: {
fontSize: themeVars['$font-size-body-2'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
fontWeight: 400,
},
h6: {
fontSize: themeVars['$font-size-body-1'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
fontWeight: 400,
},
subtitle1: {
fontSize: themeVars['$font-size-subhead'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
fontWeight: 400,
},
subtitle2: {
fontSize: themeVars['$font-size-title'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
fontWeight: 400,
},
body1: {
fontSize: themeVars['$font-size-body-2'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
color: themeVars['$color-text1-4'],
fontWeight: 400,
},
body2: {
fontSize: themeVars['$font-size-body-1'],
lineHeight: themeVars['$font-lineheight-2'],
letterSpacing: 'initial',
},
caption: {
fontSize: themeVars['$font-size-body-2'],
lineHeight: themeVars['$font-lineheight-1'],
letterSpacing: 'initial',
color: themeVars['$color-text1-3'],
fontWeight: 400,
},
},
spacing: 4,
shape: {
borderRadius: themeVars['$corner-1'],
},
props: {
// 组件的名称
MuiButtonBase: {
// 需要修改的默认属性
disableRipple: true, // 禁止 ripple 效果
},
MuiButton: {
disableElevation: true, //取消阴影
},
MuiAppBar: {
elevation: 0, //取消阴影
},
MuiPaper: {
elevation: 0, //取消阴影
},
MuiCard: {
elevation: 0, //取消阴影
},
},
overrides: {
MuiContainer: {
root: {
paddingLeft: '20px',
paddingRight: '20px',
},
},
// 重置Typography组件样式
MuiTypography: {
root: {
color: themeVars['$color-text1-4'],
wordBreak: 'break-all',
},
gutterBottom: {
marginBottom: '0.1em',
},
},
MuiInputBase: {
inputMultiline: {
lineHeight: themeVars['$font-lineheight-1'],
},
multiline: {
padding: 0,
},
},
MuiButtonBase: {
root: {
zIndex: 1,
},
},
//重置Button组件样式
MuiButton: {
root: {
flexShrink: 0,
lineHeight: 1,
letterSpacing: 'normal',
textTransform: 'none',
},
sizeSmall: {
height: themeVars['$btn-size-s-height'],
minWidth: '72px',
padding: '0 10px',
fontSize: themeVars['$btn-size-s-font'],
},
sizeLarge: {
height: themeVars['$btn-size-l-height'],
minWidth: '128px',
padding: '0 22px',
fontSize: themeVars['$btn-size-l-font'],
},
contained: {
color: themeVars['$color-text1-4'],
},
outlined: {
border: 'none',
'&$disabled': {
border: 'none',
color: themeVars['$color-text1-1'],
},
},
outlinedPrimary: {
border: 'none',
'&:hover': {
border: 'none',
backgroundColor: themeVars['$color-white'],
},
},
},
MuiCheckbox: {
root: {
color: themeVars['$color-text1-2'],
},
colorSecondary: {
'&$checked': {
color: themeVars['$color-brand1-6'],
},
},
},
// 重置Card组件样式
MuiCard: {},
MuiCardHeader: {
root: {
padding: `15px ${themeVars['$layout-padding-lr']}`,
},
title: {
fontSize: '15px',
lineHeight: 1,
},
},
MuiCardContent: {
root: {
padding: `${themeVars['$layout-padding-tb']} ${themeVars['$layout-padding-lr']}`,
},
},
MuiCardActions: {
root: {
padding: `9px ${themeVars['$layout-padding-lr']}`,
float: 'right',
},
spacing: {
'& > :not(:first-child)': {
marginLeft: '10px',
},
},
},
// 重置List组件样式
MuiList: {
root: {
paddingLeft: themeVars['$layout-padding-lr'],
backgroundColor: themeVars['$color-white'],
},
padding: {
paddingTop: 0,
paddingBottom: 0,
},
},
MuiListItem: {
root: {
paddingTop: themeVars['$layout-padding-tb'],
paddingBottom: themeVars['$layout-padding-tb'],
paddingRight: themeVars['$layout-padding-lr'],
minHeight: themeVars['$list-item-min-height'],
},
gutters: {
paddingLeft: 0,
paddingRight: themeVars['$layout-padding-lr'],
},
secondaryAction: {
paddingRight: themeVars['$list-item-secondaryAction-padding-right'],
},
},
MuiListItemText: {
root: {
marginTop: 0,
marginBottom: 0,
},
multiline: {
marginTop: 0,
marginBottom: 0,
},
},
MuiListItemSecondaryAction: {
root: {
right: themeVars['$layout-padding-lr'],
},
},
},
};