Как стилизовать <Link>используя styled-component - PullRequest
Новая
       4

Как стилизовать <Link>используя styled-component

1 голос
/ 29 марта 2020

Я использовал это Link из @material-ui/core/Link в моем коде TypeScript, и оно отлично работало: 

<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, это не сработает.

Как правильно использовать styleled-компоненты в этом случае? Или любая другая css-in-js альтернатива?

Ответы [ 3 ]

1 голос
/ 29 марта 2020

Вы должны сделать свой 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;
`;
0 голосов
/ 29 марта 2020

Этот код работает и не получает предупреждений от компилятора машинописи 

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>
  );
}
0 голосов
/ 29 марта 2020

Вы можете использовать <Link> поверх других элементов или кнопок, например,

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

. Затем вы можете сделать две вещи для стилизации кнопки / элементов

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

...