如何使用React在Emotion情感中组成样式化的组件？

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>

  );

}