Question

我正在尝试使用样式化的组件来使来自语义UI反应的标头组件个性化。

我尝试：

header.jsx：

import React  from 'react';

import { Header } from 'semantic-ui-react';
import TipografiaHeader  from './cabecalho.css'


const HeaderPages = () => (
    <div>
        <TipografiaHeader as='h2'
        textAlign='center'
        >
            Workout Log
        </TipografiaHeader>
    </div>
  )

export default HeaderPages

cabecalho.jss.js：

import styled from "styled-components";
import { Header } from 'semantic-ui-react';


const TipografiaHeader = styled.Header`
    background: red;
`;

export { TipografiaHeader };

但是在控制台中，我收到：

未捕获的TypeError：_styledComponents2.default.Header不是功能

Answer 1

styled.element的语法只能用于HTML元素。例如：

styled.h1``

要对自定义组件进行样式设置，使用的语法为：

styled(Header)``

请注意，此自定义组件要求将className属性传递到下面的DOM元素中才能起作用。

Docs

如何在样式化组件中添加现有组件的样式？

1 个答案: