Styled component doesnt't want to render on screen-CodePudding

like the title says I have problem with styled components. They do not want to render no matter what style attributes I add to them, they simply don't want to render. Anyone know if I made a typo or something like that, if you could help me I would gladly appreciate it. This is the code I am working with.

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

Now this is how I am importing it into another component:

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


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

CodePudding user response：

Your problem here is that React components must start with a capital letter, even if they are styled components. You can read more about it here or here.

Your code should be like this

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

CodePudding user response：

React components use PascalCase: change testStyled to TestStyled.

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

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