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

Question

我想使用 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;
}

Answer 1

在讨论对内部所有元素应用样式时，为所有 Surface 元素添加父元素 class 即可。

试试这个-

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

Answer 2

这可以使用 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;

Answer 3

如果我没理解错的话，您希望自定义组件而不需要外部 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>
  );
};

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

Inherit CSS classes in styled-components definitions?

html

javascript

css

reactjs

styled-components