Styled Components not loaded - React Typescript Webpack setup

Question

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

Dean James · Accepted Answer · 2020-12-22 23:38:15Z

1

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

answered Dec 22, 2020 at 23:38

Dean James

2,6434 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ntshembo Hlongwane Over a year ago

Quick Questions before you go let's say I want to style the div having class App I would wrap it around replace the div with whatever variable that I had decided? And is it best practice to isolate style to another file then import?

Dean James Over a year ago

Yep that's how they work. It's up to you how you organise your components, but as an application grows, it can be better organised if each is in it's own individually responsible file. When you want to share high level things such as colours and font sizes, look into using themes.

Collectives™ on Stack Overflow

Styled Components not loaded - React Typescript Webpack setup

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related