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

Question

I was using this Link from @material-ui/core/Link in my TypeScript code and it worked perfectly:

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

However, I am trying to switch to styled-components placed in another file. Now, I am trying to use this (eg: https://styled-components.com/docs/basics ):

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

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

along with:

<StyledLink>Forgot?</StyledLink>

But I keep getting errors on className and children that Binding element 'children' implicitly has an 'any' type.ts(7031 but even if I add any , It doesn't work.

What is the correct way to use styled-components in this case? Or any other css-in-js alternative?

Answer 1

You should make your Link component just like below:

// 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

You can use the <Link> on top of other divs or buttons for example

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

you can then do two things to style the button / divs

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

or the second is import a separate css file

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

and then give a style

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

Answer 3

This code works, and gets no warnings from the typescript compiler

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>
  );
}