reactjs - 如何在 React 应用程序中使用样式化组件

Question

我一直在尝试在我的反应应用程序上将样式从 bulma 更改为 Styled 组件，但是在尝试在我的函数中实现它时遇到了一些问题。

import React, {FC} from 'react';
import styled from 'styled-components';

const theme = styled.div`
text-align: center;
background-color: #535151;
font-style: bold;
`;

const H1 = styled.h1`
font-size: 60pt;
font-style: Verdana;
color: black;
`;

interface HeaderProps {
    title: string;
    subtitle: string;
}

const Header: FC<HeaderProps> = ({title, subtitle}) =>{
    return (
        <>
            <theme>
                <H1 className="title mb-3">{title}</H1>
                <h2 className="subtitles mt-0">{subtitle}</h2>
            </theme>
                   
               
        </>
    );
}

export default Header;

标签： reactjsstyled-componentsbulma

Answer 1

import React from 'react';
import styled from 'styled-components';

const Template = styled.a`  
    background-color: red;
`;

export const Test = () => {
    return(
        <>
            <Template>Hello</Template>
        </>
    )
}

尝试这个。