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

我认为使用样式化组件是可能的

使用第一个样式化组件

块

作为另一个组件的基础，如

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

import React，{Component}来自'React'；
从'react dom'导入{render}；
导入“/style.css”；
从“样式化组件”导入样式化
export const Block=styled.div`
宽度：100px；
高度：100px；
背景：红色；
`
export const BlockOne=styled.Block`
背景：黄色；
`
常量应用=（）=>{
返回(
);
}
render（，document.getElementById（'root'））；

有没有办法做到这一点

样式化组件只有基本组件（如div、span等标记）作为属性。对于其他任何事情，你都可以将其作为道具传递

如果将自定义组件传递给它，请确保它接受类名，并将其传递给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;
`

constmycomponent=（{className}）=>{
return//styled组件将使用此类名应用样式
}
导出常量MyStyledComponent=styled（MyComponent）`
背景：黄色；
`

否则就没有效果了

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;
`