时间戳

首页 > 解决方案 > 样式化的组件不想在屏幕上呈现

reactjs - 样式化的组件不想在屏幕上呈现

问题描述

正如标题所说，我对样式化组件有疑问。无论我添加什么样式属性，他们都不想渲染；他们根本不想渲染。有谁知道我是否打错字或类似的东西？这是我正在使用的代码。

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

const testStyled = styled.h1`
font-size:10px;
 `;

export const Datepicker = () => {
  return (
    <div>
      <testStyled>Test</testStyled>
    </div>
  );
};

现在这就是我将它导入另一个组件的方式：

import React from "react";
import styled from "styled-components";
import {Datepicker} from "./Datepicker"


export const AnotherComponent = () => {
  return (
    <div>
      <Datepicker></Datepicker>
    </div>
  );
};

标签： reactjsstyled-components

解决方案

您的问题是 React 组件必须以大写字母开头，即使它们是样式化的组件。您可以在此处或此处阅读有关它的更多信息。

你的代码应该是这样的

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

const TestStyled = styled.h1`
font-size:10px;
 `;

export const Datepicker = () => {
  return (
    <div>
      <TestStyled>Test</TestStyled>
    </div>
  );
};

推荐阅读