CODEWITHSUNDEEP
reactjsstyled-components
ahmedskulj10
ahmedskulj10

Reputation: 421

Styled component doesnt't want to render on screen

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

Upvotes: 0

Views: 497

Answers (2)

lbsn
lbsn

Reputation: 2412

React components use PascalCase: change testStyled to TestStyled.

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

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

Upvotes: 0

AntonioGarc&#237;a
AntonioGarc&#237;a

Reputation: 1150

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

Upvotes: 2

Related Questions