Styled component doesnt't want to render on screen

Question

Like the title says, I have a 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. Does anyone know if I made a typo or something like that? 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>
  );
};

Answer 1

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