如何使用React在emotionjs中编写样式组件？

Question

我想做的是将多个样式组件组合成一个。

使用纯 CSS，这非常简单：

<button class="btn large red"></button>

这是我在 React 中的情感尝试：

import styled from "@emotion/styled/macro";

const A = styled.button({
  color: "red"
});

const B = styled.button({
  fontSize: 32
});

// I know how to add single styled component. But how to also add B here?
const C = styled(A)({
  // some additional styles
});

function App() {
  return (
    <div className="App">
      <A>A</A>
      <B>B</B>
      <C>C</C>
    </div>
  );
}

请查看演示：

演示

Answer 1

默认情况下似乎styled无法组合多个样式组件。

您可能想了解一下情感css的功能。这允许组合多个已定义的 css 样式。尽管这需要更多行代码来额外定义 css 对象。

使用css您的示例可能如下所示：

import styled from "@emotion/styled/macro";
import { css } from "@emotion/core";

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const red = css({
  color: "red"
});

const A = styled.button(red);

const bolt = css({
  fontSize: 32
});

const B = styled.button(bolt);

const C = styled.button(red, bolt);

function App() {
  return (
    <div className="App">
      <A>A</A>
      <B>B</B>
      <C>C</C>
    </div>
  );
}

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

演示