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

Question

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

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

Answer 1

你的问题是 React 组件必须以大写字母开头，即使它们是样式组件。您可以阅读更多相关信息 here or here。

你的代码应该是这样的

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

Answer 2

React 组件使用 PascalCase：将 testStyled 更改为 TestStyled。

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

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

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

Styled component doesnt't want to render on screen

reactjs

styled-components