Question

我有一个来自Material-UI的链接组件。我列出了这些Link组件的列表，并希望为它们设置一个非常具体的[19-07-13 15:52:55:823 PDT] [{close=33.2100}, {close=31.5000}, {close=30.3700}, {close=29.1000}, {close=30.3600}, {close=32.4100}, {close=27.4100}, {close=26.4400}, {close=27.5000}, {close=27.9600}, {close=28.2200}, {close=27.8800}, {close=27.6800}, {close=27.8500}, {close=28.9800}, {close=25.5200}, {close=26.3700}, {close=23.2900},，但它们似乎总是还会添加一些额外的

class

但是，生成的锚元素具有这些类

import React from "react";
import { Link as RouterLink } from "react-router-dom";
import { Link } from "@material-ui/core";

interface Props {
  to: string;
  children: React.ReactNode | string;
}

const LocalLink: React.FC<Props> = ({ to, children}) => (
  <Link to={to} component={RouterLink} className="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"}>
    {children}
  </Link>
);

export default LocalLink;

因此，您会看到额外的“ MuiTypography-root”，“ MuiLink-root”，“ MuiLink-underlineHover”和“ MuiTypography-colorPrimary”。我猜是Link组件添加了这些，但是如何防止呢？

此外，我设置的类名将传递给anchor元素的第一个子代。

Answer 1

当我制作一个组件来处理内部和外部链接时，这对我有用。

// import both Link components

import { Link } from "@material-ui/core";
import { Link as RouterLink } from "react-router-dom";

然后在您的组件内部，这是我用来从Link渲染react-router-dom组件的代码。

// wrap RouterLink with Material UI link and add Mui classes to className

  <Link >
    <RouterLink className="MuiTypography-root MuiLink-root MuiLink-underlineHover  MuiListItem-root MuiListItem-gutters MuiTypography-colorPrimary" to={to}>{value}</RouterLink>
  </Link>

为Material UI组件设置特定的类

1 个答案: