如何在 React 应用程序中使用样式化组件答案

【问题标题】：How to use styled component on a React application如何在 React 应用程序中使用样式化组件
【发布时间】：2021-01-05 11:50:52
【问题描述】：

我一直在尝试在我的 react 应用程序上将样式从 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;

【问题讨论】：

标签： reactjs styled-components bulma

【解决方案1】：

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

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

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

试试这个。

【讨论】：