我使用 React 和 Node JS 开始了一个新项目。现在我正在与 Material UI 作斗争。我正在尝试更改 AppBar 项目（按钮）的样式。
我的“菜单”组件上有这个：
const Menu = () => {
return(
<AppBar position="sticky">
<Toolbar>
<a href="/"><img className="app-logo" src={require ("./img/invoices_logo.png")} /></a>
<Button href="register">dasdas</Button>
</Toolbar>
</AppBar>
)
}
export default Menu
这是我的应用程序主题：
const apptheme = createMuiTheme({
palette: {
primary: {
main: blue[900],
},
secondary: {
main: pink[600]
},
},
overrides: {
MuiAppBar: {
root: {
color: grey[50]
}
}
}
});
ReactDOM.render(
<BrowserRouter>
<ThemeProvider theme={apptheme}>
<Menu/>
<Switch>
<Route path='/' exact render={props => <App {...props}></App>}/>
<Route path='/register' exact render={props => <Register {...props}></Register>}/>
</Switch>
</ThemeProvider>
</BrowserRouter>,
document.getElementById('root')
);
我希望按钮文本的颜色为白色，但仅适用于 AppBar 中的按钮。你能帮我解决这个问题吗？谢谢！
您可以像这样创建自定义按钮：
const ColorButton = withStyles(theme => ({
root: {
color: grey[900]
}
}))(Button);
const Menu = () => {
return(
<AppBar position="sticky">
<Toolbar>
<a href="/"><img className="app-logo" src={require ("./img/invoices_logo.png")} /></a>
<ColorButton href="register">dasdas</ColorButton>
</Toolbar>
</AppBar>
)
}
export default Menu
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句