在 styled-components 中指定从 UI 库导入的组件的道具

Question

我正在使用 grommet 和 styled-components。我有几个地方使用 grommet 提供的组件并设置了一些类似的道具。我想通过使用 grommet 导出的组件创建一个 styled-components 并使用 styled-components.

指定设置道具

这可以使用 styled-components 吗？以下是我正在尝试使用的内容。

import { Header } from 'grommet'
import styled from 'styled-components'

const AppHeader = styled(Header)`
    background="brand"
    height="80px"
    pad="small"
`
export default AppHeader

background、height和pad没有在AppHeader上设置。我只看到示例中设置了实际的 CSS 道具。所以，我想问一下，以上是否可行？

Answer 1

是的。绝对可以将 styled-components 与索环组件一起使用。

在您的示例中，您提供给 styled-components 的语法不起作用，因此遵循推荐的语法结构应该可以达到以下目的：

const AppHeader = styled(Header)`
  background: #000;
  height: 80px;
  padding: 30px;
`;

我还注意到您正在尝试使用 grommet 的道具，例如 pad，这不适用于 styled-components 因为它接受 CSS 而不是 grommet 道具，简单的方法是，在这种情况下，只需使用 padding 就可以了。

关于您尝试引用的 brand 颜色，brand 未使用 CSS 颜色定义，因此同样无效。如果您想使用 brand 颜色，您可以在定义样式组件时始终参考主题颜色，如下所示：

const AppHeader = styled(Header)`
  background: ${({ theme }) => theme.global.colors.brand};
  height: 80px;
  padding: 30px;
`;

这是一个完整的（有效的）代码示例：

import React from "react";
import { render } from "react-dom";
import styled from "styled-components";

import { grommet, Header, Heading, Grommet, Paragraph } from "grommet";

const AppHeader = styled(Header)`
  background: ${({ theme }) => theme.global.colors.brand};
  height: 80px;
  padding: 30px;
`;

const App = () => (
  <Grommet theme={grommet}>
    <AppHeader pad="small">
      <Heading level={3}>
        <strong>Hello World</strong>
      </Heading>
      <Paragraph>Hello from a Grommet page!</Paragraph>
    </AppHeader>
  </Grommet>
);

render(<App />, document.getElementById("root"));

在 styled-components 中指定从 UI 库导入的组件的道具

Specify props of a component imported from a UI library in styled-componennts

grommet

styled-components