如何将样式化组件样式应用于自定义 React 组件？

Question

我有一个名为 StyledButton 的样式化组件和一个名为 AddToCart 的 React 组件。我想将StyledButton 的样式应用到AddToCart。

我已经尝试了以下方法：

import styled from "styled-components";
import AddToCart from "./AddToCart";
import StyledButton from "./styles/StyledButton";

const StyledAddToCart = styled(AddToCart)`
  ${StyledButton}
`;

我想要做的已经在https://www.styled-components.com/docs/basics#styling-any-components 的文档中，但这会将新样式应用于组件。问题是我想使用样式组件中的现有样式 (StyledButton)

来自文档：

// This could be react-router-dom's Link for example
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

我真的很想将StyledButton 中的样式应用到StyledAddToCart，而无需手动复制样式。

Answer 1

您可以与css util 共享样式：

// import styled, {css} from 'styled-components'
const {css} = styled;

const Link = (props) => <a {...props} />

const sharedBtnStyle = css`
  color: green;
  border: 1px solid #333;
  margin: 10px;
  padding: 5px;
`;

const StyledButton = styled.button`
  ${sharedBtnStyle}
`;

const AddToCartBtn = styled(Link)`
  ${sharedBtnStyle}
  color: red;
`;

function App() {
  return (
    <div>
      <StyledButton>styled button</StyledButton>
      <div />
      <AddToCartBtn>styled link</AddToCartBtn>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id="root"/>