样式化组件 - 使用样式化组件作为另一个组件的基础

Question

我认为这可以通过样式化组件实现

使用第一个样式组件Block作为另一个组件的基础，例如

export const BlockOne = styled.Block

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import styled from 'styled-components'

export const Block = styled.div`
  width: 100px;
  height: 100px;
  background: red;
`

export const BlockOne = styled.Block`
  background: yellow;
`

const App = () => {
  return (
    <div>
      <Block/>
      <BlockOne/>
    </div>
  );
}

render(<App />, document.getElementById('root'));

有没有办法做到这一点

Answer 1

是的，像这样

export const BlockOne = styled(Block)`
  background: yellow;
`

styled-component 只有基本组件（div、span 等标签）作为属性。对于其他任何事情，您都可以将其作为道具传递。

如果您将自定义组件传递给它，请确保它接受 className 并将其传递给 div 或其他内容：

const MyComponent = ({className}) => {
  return <div className={className}></div> // styled-component will use this classname to apply the style
}

export const MyStyledComponent = styled(MyComponent)`
  background: yellow;
`

不然就没有效果了。