样式化组件-使用样式化组件作为其他组件的基础

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

是的，就像this

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

样式化-组件只有基本组件(标签，如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;
`

否则它不会有任何效果。