如何风格<Link>使用样式组件

Question

我在我的 TypeScript 代码中使用了来自@material-ui/core/Link这个Link ，它工作得很好：

<Link href="#" variant="body2">
  Forgot?
</Link>

但是，我正在尝试切换到放置在另一个文件中的styled-components 。 现在，我正在尝试使用它（例如： https : //styled-components.com/docs/basics ）：

const Link = ({ className, children}) => (
  <a className={className}>
    {children}
  </a>
);

export const StyledLink = styled(Link)`
  href: #;
  variant: body2;
`;

随着：

<StyledLink>Forgot?</StyledLink>

但是我不断收到关于className和children错误，即Binding element 'children' implicitly has an 'any' type.ts(7031但即使我添加了any ，它也不起作用。

在这种情况下使用样式组件的正确方法是什么？ 或者任何其他css-in-js替代方案？

Answer 1

你应该像下面那样制作你的Link组件：

// Link.js
import { Link } from '@material-ui/core/Link';
import styled from 'styled-components';

export default styled(Link)`
  display: block;
  color: #F51963;
  text-decoration: none;
`;

Answer 2

例如，您可以在其他 div 或按钮之上使用<Link>

<Link><button className="Btn">Forgot?</button></Link>

然后你可以做两件事来设置按钮/div的样式

<Link><button className="Btn" style={{backgroundColor: 'red'}}>Forgot?</button></Link>

或者第二个是导入一个单独的 css 文件

import classes from './ComponentName.module.css'

然后给出一个样式

<Link><button className={classes.Btn}>Forgot?</button></Link>

Answer 3

此代码有效，并且不会从打字稿编译器收到任何警告

import styled from "styled-components";

const Link = ({
  className,
  children
}: {
  readonly className: string;
  readonly children: React.ReactElement;
}) => (
  <a href="/" className={className}>
    {children}
  </a>
);

export const StyledLink = styled(Link)`
  href: #;
  variant: body2;
  color: red;
`;

function App() {
  return (
    <StyledLink className="classic">
      <div>Forgot?</div>
    </StyledLink>
  );
}