Css 使用“时，已设置样式的组件不会继承样式”；作为「；属性

我将

样式化系统

用于

样式化组件

，其基本情况如下：

const buttonFont = {
  fontFamily: "Chilanka"
};

// style a boilerplate for text
const Text = styled.div`
  ${typography}
  ${color}
`;

// button blueprint
const Button = ({ children, ...rest }) => {
  return (
    <Text as="button" {...buttonFont } {...rest}>
      {children}
    </Text>
  );
};

// styled button using button
const StyledButton = styled(Button)`
  color: white;
  background-color: gray;
  padding: 10px 20px;
  border: 2px solid black;
`;

// When using "as" this component does not includes buttonFont styles
const StyledLabel = styled(StyledButton).attrs({
  as: "label"
})``;

const buttonFont={
丰特家族：“奇兰卡”
};
//为文本设置样板样式
const Text=styled.div`
${排版}
${color}
`;
//按钮蓝图
常量按钮=（{children，…rest}）=>{
返回(
{儿童}
);
};
//使用按钮的样式化按钮
const StyledButton=styled（按钮）`
颜色：白色；
背景颜色：灰色；
填充：10px 20px；
边框：2件纯黑；
`;
//使用“as”时，此组件不包括buttonFont样式
const StyledLabel=styled（StyledButton）.attrs({
as:“标签”
})``;

我想创建一个

StyledLabel

，它将继承

StyledButton

中的所有样式，但将标记更改为

标签

。但是当使用

“as”

属性时，

StyledLabel

不会获得

buttonFont

样式

---

请看这里的实时示例：

我不确定您的最终目标是什么，但这两个示例在继承方面起了作用。但是，它们可能对您的作文计划没有帮助：

import React from "react";
import styled, {css} from "styled-components";
import { typography, color } from "styled-system";
import ReactDOM from "react-dom";

import "./styles.css";

const buttonFont = {
  fontFamily: "Chilanka"
};

const Text = styled.div`
  ${typography}
  ${color}
  margin: 24px;
`;

const StyledButton = styled(Text)`
  color: white;
  background-color: gray;
  padding: 10px 20px;
  border: 2px solid black;
`;

const StyledLabel = styled(StyledButton)`
  color: yellow;
`;

const __Text = styled.div`
  ${typography(buttonFont)}
  ${color}
  margin: 24px;
`;

const __StyledButton = styled(__Text)`
  color: white;
  background-color: gray;
  padding: 10px 20px;
  border: 2px solid black;
`;

const __StyledLabel = styled(__StyledButton)`
  color: yellow;
`;

function App() {
  return (
    <div className="App">
      <StyledButton as="button" {...buttonFont}>styled button</StyledButton>
      <StyledLabel as="label" {...buttonFont}>Does inherit styled font with "as"</StyledLabel>
      <br />
      <br />
      <br />
      <__StyledButton as="button">styled button</__StyledButton>
      <__StyledLabel as="label">Does inherit styled font with "as"</__StyledLabel>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
导入样式化，{css}来自“样式化组件”；
从“样式化系统”导入{排版，颜色}；
从“react dom”导入react dom；
导入“/styles.css”；
常量buttonFont={
丰特家族：“奇兰卡”
};
const Text=styled.div`
${排版}
${color}
利润率：24px；
`;
const StyledButton=styled（文本）`
颜色：白色；
背景颜色：灰色；
填充：10px 20px；
边框：2件纯黑；
`;
const StyledLabel=styled（StyledButton）`
颜色：黄色；
`;
const\uuu Text=styled.div`
${排版（buttonFont）}
${color}
利润率：24px；
`;
const_uustyledbutton=已设置样式（u Text）`
颜色：白色；
背景颜色：灰色；
填充：10px 20px；
边框：2件纯黑；
`;
常量StyledLabel=styled（uuu StyledButton）`
颜色：黄色；
`;
函数App（）{
返回(
样式按钮
是否继承带有“as”的样式字体






样式按钮
是否继承带有“as”的样式字体
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；