Styled Components not loaded - React Typescript Webpack setup

0
votes

Hello so I am trying styled components for the first time so I do not know where I might be going wrong because I have my webpack setup nicely and my .babelrc file.

So when I was reading through the docs of Styled component they mentioned adding this plugin "babel-plugin-styled-components",

Here is my .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": ["babel-plugin-styled-components"]
}

So I wont be adding webpack config because when searching I never saw anything that linked styled components to webpack so I believe setup is by .babelrc... But if webpack config is required please comment and I will add that.

Here is the basic component where I wanted to use styled components

import React, { FC } from 'react';
import Styled from 'styled-components';

const Title = Styled.h1`
  color:black;
`;

export const App: FC = () => {
  return (
    <div className="App">
      <h1>Brag Diary</h1>
    </div>
  );
};

The style is not made so I do now know where I might be going wrong can I please get some assistant

1
reactjstypescriptstyled-components

1 Answers

1
votes

You have to refer to the styled component directly:

import React, { FC } from 'react';
import Styled from 'styled-components';

const Title = Styled.h1`
  color:black;
`;

export const App: FC = () => {
  return (
    <div className="App">
      <Title>Brag Diary</Title>
    </div>
  );
};