javascript - 如何使用 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>
  );
}

请查看演示:

Demo

Answer 1

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

您可能想看看情感的css 功能here .这允许组合多个定义的 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);

Demo