Изменить стиль кнопок внутри AppBar Material UI React

Question

Я начал новый проект, используя 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. ты можешь помочь мне с этим? Спасибо!

Answer 1

Вы можете создать собственную кнопку, например:

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