使用 Styled Components 为单独的功能组件设置样式答案

【问题标题】：Styling a separate functional component with Styled Components使用 Styled Components 为单独的功能组件设置样式
【发布时间】：2021-03-23 21:47:33
【问题描述】：

如何使用与F.Link 组件相同的样式设置News 组件的样式？我想设置此组件的样式，同时将其作为自己的功能组件分开。

import styled from 'styled-components';

const F = {
  Container: styled.div`
    ...
  `,
  Text: styled.p`
    ...
  `,
  Link: styled.a`
    transition: color 0.5s linear;
    text-decoration: none;
    color: ${(props) => (props.isDark ? '...' : '...')};
  `,
};

export const Footer = ({ isDark }) => {
  const isPhone = window.matchMedia('...').matches;

  const News = () => (
    <>
      <a href='#'>News</a>
    </>
  );

  return (
    <F.Container>
      <F.Text>Thanks for stopping by
        <F.Link isDark={isDark} href='#'>Contact</F.Link>
        {isPhone ? (
          <></>
        ) : (
          <News/>
        )}
      </F.Text>
    </F.Container>
  );
};

【问题讨论】：

您想要设置样式的每个组件都必须接受 className 属性并将其传递给 DOM 元素。

标签： reactjs styled-components

【解决方案1】：

这就是你要找的吗？现在，每当您使用 <News /> 时，它都会使用 F.Link 样式组件的样式

const News = () => (
  <F.Link isDark={isDark} href='#'>
     News
  </F.Link>
);

【讨论】：

【解决方案2】：

试试这个...这里我通过从 F.Link 组件扩展它来创建新闻组件的变体。

// Rest of your code

const News = styled(F.Link)``;

 return (
    <F.Container>
      <F.Text>Thanks for stopping by
        <F.Link isDark={isDark} href='#'>Contact</F.Link>
        {isPhone ? (
          <></>
        ) : (
          <News href='#'>
             News
          </News>
        )}
      </F.Text>
    </F.Container>
  );
};

【讨论】：