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

您可以与ubiquitous language实用程序共享样式：

css

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

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

1 个答案: