在样式组件定义中继承 CSS 类？答案

【问题标题】：Inherit CSS classes in styled-components definitions?在样式组件定义中继承 CSS 类？
【发布时间】：2021-10-09 20:10:32
【问题描述】：

我想使用 styled-components 为我的应用设置样式，其中我的组件从现有的全局定义的 CSS 继承样式。在下面的示例中，如何使Surface 继承.raised 和.bordered 类，这样我就不必在每次使用中重复className="raised bordered"？我想要类似于Composition in Emotion 的东西。

https://codesandbox.io/s/optimistic-ramanujan-xs8rt

App.js

import "./styles.css";
import styled from "styled-components";

const App = () => (
  <div>
    <Surface className="raised bordered">Hello World 1</Surface>
    <Surface className="raised bordered">Hello World 2</Surface>
    <Surface className="raised bordered">Hello World 3</Surface>
  </div>
);

const Surface = styled.div`
  color: darkblue;
  margin: 20px;
`;

export default App;

styles.css

.raised {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.bordered {
  border: 1px solid black;
}

【问题讨论】：

你也可以在这里做合成，你打算如何“继承”它而不在某处写这个css？你问语法是什么？
CSS 是用styles.css 编写的。我可以在任何地方定义它，我的问题是如何在 styled-components 定义上继承 CSS 类样式。我的 OP 中的核心问题是how can I make Surface inherit the classes .raised and .bordered so that I don't have to repeat className="raised bordered" in each usage。有没有这样的语法？

标签： javascript html css reactjs styled-components

【解决方案1】：

这可以使用attrs 来实现，如下所示

import "./styles.css";
import styled from "styled-components";

const App = () => (
  <>
    <Surface>Hello World 1</Surface>
    <Surface>Hello World 2</Surface>
    <Surface>Hello World 3</Surface>
  </>
);

const Surface = styled.div.attrs({
  className: "raised bordered"
})`
  color: darkblue;
  margin: 20px;
`;

export default App;

【讨论】：

【解决方案2】：

如果我理解正确，您希望在没有外部css 的情况下自定义组件并在项目的任何地方使用它。最简单的使用方式是道具。第二个更复杂的创建每个.raised 和.bordered 它自己的样式组件。 easiest way example

App.js

import { Surface } from "./Surface";

const App = () => (
  <div>
    <Surface bordered>Hello World 1</Surface>
    <Surface boxShadow>Hello World 2</Surface>
    <Surface bordered boxShadow>
      Hello World 3
    </Surface>
  </div>
);

export default App;

Surface.js

import styled from "styled-components";

const SurfaceStyle = styled.div`
  color: darkblue;
  margin: 20px;
  ${({ bordered }) => bordered && "border: 1px solid black"};
  ${({ boxShadow }) =>
    boxShadow && "box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;"}
`;

export const Surface = ({ bordered, boxShadow, children }) => {
  return (
    <SurfaceStyle bordered={bordered} boxShadow={boxShadow}>
      {children}
    </SurfaceStyle>
  );
};

【讨论】：

【解决方案3】：

当谈到在内部的所有元素上应用样式时，为所有 Surface 元素添加一个父类将起作用。

试试这个-

App.js

const App = () => (
  <div className="combined">
    <Surface className="raised bordered">Hello World 1</Surface>
    <Surface className="raised bordered">Hello World 2</Surface>
    <Surface className="raised bordered">Hello World 3</Surface>
  </div>
);

Styles.css

.combined div {
  border: 1px solid black;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

【讨论】：

我希望样式或类与Surface 的实际定义相关联。将 className 提高一个级别不是组合 - 如果我在该包装 div 之外的其他地方重用 Surface 元素，它将不起作用。这还将设置我在包装器 div 中添加的所有元素的样式，而不仅仅是 Surface 元素