![](/img/trans.png)
[英]how to use button as link in material-ui react with out underline and change color text?
[英]How can I change the color of a Link in React with Material-UI?
我无法更改按钮内链接的颜色。 当我将辅助颜色应用于 Button 时,它不会生效。 在其他组件中,它确实以这种方式工作。
<AppBar position='fixed'>
<Toolbar>
<Button color='secondary'>
<Link to="/">Home</Link>
</Button>
</Toolbar>
</AppBar>
在 App.js 中,我创建了自定义主题并使用<ThemeProvider theme={customTheme}>
将其包裹在所有组件周围
应用程序.js:
const customTheme = createMuiTheme({
palette: {
primary: {
main: '#36454B',
contrastText: '#fff',
},
secondary: {
light: '#55dab3',
main: '#00a883',
dark: '#007856',
contrastText: '#000',
}
}
});
我无法更改按钮内链接的颜色。 当我将辅助颜色应用于按钮时,它不会生效。 在其他组件中,它确实以这种方式工作。
<AppBar position='fixed'>
<Toolbar>
<Button color='secondary'>
<Link to="/">Home</Link>
</Button>
</Toolbar>
</AppBar>
在App.js中,我创建自定义主题,并使用<ThemeProvider theme={customTheme}>
将其包装在所有组件中
App.js:
const customTheme = createMuiTheme({
palette: {
primary: {
main: '#36454B',
contrastText: '#fff',
},
secondary: {
light: '#55dab3',
main: '#00a883',
dark: '#007856',
contrastText: '#000',
}
}
});
我知道这是旧的,但是您可以使用主题对象(Material-UI v4 和 MUI v5)中的操作对象更改主题中所有链接对象的颜色:
palette: {
primary { ... },
secondary { ... },
action: {
active: lightBlue[200],
activeOpacity: 1,
hover: lightBlue[100],
hoverOpacity: 0.7,
focus: lightBlue[600],
focusOpacity: 1,
selected: lightBlue[300],
selectedOpacity: 1
},
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.