我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
我有以下几点:
如何去掉蓝色下划线? 代码如下:
<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>
MenuItem组件来自http://www.material-ui.com/#/components/menu
当前回答
jsx:
<Link className="link">
test
</Link>
css:
.link{
text-decoration: none;
}
其他回答
材料UI v5+
你应该能够全局定制MUI组件样式,比如:
import { createTheme } from '@mui/material'
const theme = createTheme({
components: {
MuiLink: {
styleOverrides: {
root: {
textDecoration: 'none',
},
},
},
},
})
const App = ({ currentAccount, neighborhoodsWithPropertyCount }) => (
<ThemeProvider theme={theme}>
<Router>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
</ThemeProvider>
)
export default App
然而,通常情况下,实际上应该使用react-router-dom中的Link组件,在这种情况下,链接默认情况下没有文本修饰。
看这里-> https://material-ui.com/guides/composition/#button。
这是官方的材质界面指南。也许它对你会像对我一样有用。
然而,在某些情况下,下划线仍然存在,您可能需要使用text-decoration: "none"。为了更简洁的方法,您可以从material-ui/core导入并使用makestyle。
import { makeStyles } from '@material-ui/core';
const useStyles = makeStyles(() => ({
menu-btn: {
textDecoration: 'none',
},
}));
const classes = useStyles();
然后将className属性设置为{classes。menu-btn}在JSX代码中。
<Link
_hover={{
textDecoration: "none"
}}
>
Logo
</Link>
添加css样式
a:link {
text-decoration: none;
color: #cc850a;
}
a:visited {
text-decoration: none;
color: #cc850a;
}
a:hover {
text-decoration: none;
color: #47a1ad;
}
a:active {
text-decoration: none;
}
对我有用的是:
<Link to="/" style={{boxShadow: "none"}}>