Как применить стили Styled Component к пользовательскому компоненту React?

Question

У меня есть стилизованный компонент с именем StyledButton и компонент React с именем AddToCart.Я хочу применить стиль от 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 , но это применяет новые стили к компоненту.Проблема в том, что я хочу использовать существующие стили из компонента Styled (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"/>