Styled components 在样式化组件中指定从UI库导入的组件的道具

我正在使用

索环

和

样式化组件

。我在一些地方使用了

grommet

提供的组件，并设置了一些类似的道具。我想使用

grommet

导出的组件创建

样式化组件

，并使用

样式化组件

指定设置道具

这是否可以使用

样式化组件
？下面是我正在尝试使用的

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

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

背景
、
高度
和
键盘
未在
AppHeader
上设置。我只看到示例中设置了实际的CSS道具。所以，我想问一下，上述方法是否可行？
是的。可以将样式化组件与索环组件一起使用

在您的示例中，您提供给样式化组件的语法不起作用，因此按照建议的语法结构应该做到以下几点：

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

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

我还注意到您正在尝试使用grommet的道具，例如
pad
，它不适用于样式化组件，因为它接受CSS而不是grommet道具，在这种情况下，简单的方法就是使用
填充
，应该可以

关于您试图引用的
品牌
颜色，
品牌
没有使用CSS颜色定义，因此同样不起作用。如果您希望使用
品牌
颜色，则在定义样式化组件时，始终可以参考主题颜色，如下所示：

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

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"));


从“React”导入React；
从“react dom”导入{render}；
从“样式化组件”导入样式化；
从“套圈”导入{套圈，标题，套圈，段落}；
const-AppHeader=styled（Header）`
背景：${（{theme}）=>theme.global.colors.brand}；
高度：80px；
填充：30px；
`;
常量应用=（）=>(
我想我们只能在样式化组件中设置css属性。但我的主要问题是，在设置答案中显示的css时，无法访问主题变量。因此，我已将其标记为正确答案。谢谢。