修改material-ui样式的几种方法总结(一)
material-UI样式根据项目需求,定制化修改,尝试了几种方法之后,根据应用场景总结以下方法。
一、单个组件,定制化强
- 定义className,根据每个类,定制化组件样式
- 行内style,个人不建议使用,因为行内样式权重高、复用性差、后期维护成本高
- 根据Component API中css部分的api进行较为复杂点样式修改
// 样式
const styles = {
root: {
background: 'linear-gradient(45deg, #771cca 30%, #0cb5a5 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
},
label: {
textTransform: 'capitalize',
},
outlined:{
border:'5px solid red'
}
};
// 结构
<Button
variant='outlined'
classes={{
root: this.props.classes.root,
label: this.props.classes.label,
outlined: this.props.classes.outlined
}}
>test</Button>
二、全局样式
// 样式
const theme = createMuiTheme({
palette: {
primary: {main: red[500]},
alarm: {main: blue[500]} // no work
},
});
// 结构
<MuiThemeProvider theme={theme}></MuiThemeProvider>
以上样式代码中,palette中的alarm是自定义属性,出发点是想拓展material-UI原先的theme内容,让所有参数语义化,但是结果并不work,查看material-UI源码,组件只支持api中对应的参数,不支持自定义扩展,故而另寻他法。
三、组件化封装
由于theme自定义参数不起作用,对于想语义化的组件,可以用styles封装自定义的组件,页面上直接引用。
//自定义方法一
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
const styledBy = (property, mapping) => props => mapping[props[property]];
const useStyles = makeStyles({
root: {
background: styledBy('color', { //color可自定义其他参数名称
red: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
blue: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
}),
border: 0,
borderRadius: 3,
boxShadow: styledBy('color', {
red: '0 3px 5px 2px rgba(255, 105, 135, .3)',
blue: '0 3px 5px 2px rgba(33, 203, 243, .3)',
}),
color: 'white',
height: 48,
padding: '0 30px',
'&:hover': {
background: styledBy('color',{
red:'blue',
blue:'red'
})
}
},
});
function MyButton(props) {
const { color, ...other } = props;
const classes = useStyles(props);
return <Button className={classes.root} {...other} />;
}
MyButton.propTypes = {
color: PropTypes.string.isRequired,
};
function AdaptingHook() {
return (
<div>
<MyButton color="red">alarm</MyButton>
<br />
<br />
<MyButton color="blue">normal</MyButton>
</div>
);
}
export {
AdaptingHook
}
// 自定义方法二
import React from 'react';
import { styled } from '@material-ui/styles';
import Button from '@material-ui/core/Button';
const Alarm = styled(Button)({
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
});
const Normal = styled(Button)({
background: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
});
function AlarmButton() {
return <Alarm>alarm-button</Alarm>;
}
function NormalButton() {
return <Normal>normal-button</Normal>;
}
export {
AlarmButton,
NormalButton
}
// 页面引用
import React, {Component} from 'react';
import {AlarmButton, NormalButton} from './common/group-one';
import {AdaptingHook} from './common/group-three'
class SinglePage extends Component {
render() {
return (
<div>
<AlarmButton></AlarmButton>
<br/>
<br/>
<NormalButton></NormalButton>
<br/>
<br/>
<AdaptingHook></AdaptingHook>
</div>
)
}
}
export default SinglePage;
对于material-UI的样式工具,styled-by研究待续。。。
附上页面button效果