reactjs 停止链接使用React工艺路线和MUI更改按钮/排版样式

z0qdvdin  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(107)

我正在创建一个组件,我希望它可以被点击-然而,当我把它们 Package 在一个<Link>中(来自react-router-dom)或者在它们上面设置component={Link} to=""时,它们里面的任何文本都变成了超链接。

上面是四个按钮,最后三个用<Link>标签 Package ,但是我不想改变它们的样式。我知道我可以使用样式删除下划线等-但是我不应该对链接标签内的所有内容都这样做。
当我把component={Link} to=""添加到一个有图像和排版的容器中时,我也会得到这个结果--所有的文本也会变成超链接。
我怎样才能阻止链接中的所有内容都被设计成超链接。

ve7v8dk2

ve7v8dk21#

有几种方法可以实现这一点。请查看MUI: How to customize作为参考。
如果您不希望站点上的任何Link组件看起来像这样,那么您可以简单地使用theme覆盖:

const theme = createTheme({
  overrides: {
    MuiLink: {
      root: {
        // ...
      },
    }
  }
});

如果你只是想让这个部分的链接看起来不同,那么你可能只想使用一个简单的可重用的组件,只设计一次样式。

import * as React from 'react';
import Link, { LinkProps } from '@mui/material/Link';
import { styled } from '@mui/material/styles';

const SimpleLink = styled(Link)<LinkProps>(({ theme }) => ({
  textDecoration: 'none'
}));

export default function StyledCustomization(url: string) {
  return <SimpleLink url={url} />;
}

相关问题