Material-UI 自定义样式

Posted 名川

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Material-UI 自定义样式相关的知识,希望对你有一定的参考价值。

记录Material-UI 自定义样式,后续持续更新

自定义样式, 伪类选择器样式定义

const useStyles = makeStyles((theme) => ({
    paper: {
        marginTop: theme.spacing(8),
        display: \'flex\',
        flexDirection: \'column\',
        alignItems: \'center\',
    },
    avatar: {
        margin: theme.spacing(2),
        backgroundColor: theme.palette.success.light,
    },
    form: {
        width: \'100%\',
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(1, 0, 2),
        backgroundColor: theme.palette.success.light,
        \'&:hover\': {
            backgroundColor: theme.palette.success.main,
        }
        
    },
    containerItem: {
        fontSize: \'14px\',
        textAlign: \'right\',
        color: \'#737373\',
        \'&:hover\': {
            color: theme.palette.success.light,
        }
    }
}))

其他的伪类同理

以上是关于Material-UI 自定义样式的主要内容,如果未能解决你的问题,请参考以下文章

如何自定义 Material-UI 和 styled-components 基于 props 的样式

在焦点、反应上更改 Material-UI 文本字段的样式

如何使用样式组件覆盖material-ui css?

带有 next.js 的 material-ui 样式

React-Router 和 Material-UI:根据路由应用自定义主题

如何在 Material-ui 的 TableSortText 组件中自定义彩色文本和图标?