I think everyone does this differently, but in my opinion your coworker is right. You shouldn't be mixing two different "style types". Either go with styled components or with classnames, but don't mix them. We sometimes use classnames (mainly because a package relies on it) and inline styles (usually because of laziness when its only one property), but only very rarely. We differentiate between a real and a fake/styled component by prefixing our styled components with Styled.. So in your case our import would look something like this: import * as Styled from `./foo.styles.ts` [...] Title Here Answer from AdrnF on reddit.com
styled-components
styled-components.com
styled-components
This Button variable here is now a React component that you can use like any other React component!
Documentation
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
Showcase
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
Releases
StrictMode-aware cleanup: Style cleanup now uses queueMicrotask to coordinate with React's effect lifecycle. In StrictMode's simulated unmount/remount cycle, styles are preserved.
Ecosystem
If you know any projects build with styled components contributions and suggestions are always welcome! Please read the contribution guidelines first and submit a PR. react-data-table-component - Data Table with built in sorting, pagination, selection, expandable rows and customizable styling.
Reddit
reddit.com › r/reactjs › styled components usage, am i the completely clueless one?
r/reactjs on Reddit: Styled Components Usage, AM I THE COMPLETELY CLUELESS ONE?
September 7, 2023 -
Long story short, I'm a newer dev at a company. Our product uses React/TS/StyledComponents. One of the other devs makes a new StyledComponent for every small little thing. Is this good usage? For me it seems easier and more readable to use a P tag and add a classname versus creating a StyledComponent for it. Especially if its just some text with barely any styles to it. So instead of writing...
<p className='title-text'>Title Here</p> they write... <TitleText>Title Here</TitleText> but for everything??
I feel like it causes a lot of context switching where other devs would have to grok whether you are working with another 'actual React component' or not. Then have to go to the style file and see what tag it really is etc. I find it much easier to see a P tag and know exactly what I am working with in a fraction of the time. Am I completely wrong on this?
Top answer 1 of 23
61
I think everyone does this differently, but in my opinion your coworker is right. You shouldn't be mixing two different "style types". Either go with styled components or with classnames, but don't mix them. We sometimes use classnames (mainly because a package relies on it) and inline styles (usually because of laziness when its only one property), but only very rarely. We differentiate between a real and a fake/styled component by prefixing our styled components with Styled.. So in your case our import would look something like this: import * as Styled from `./foo.styles.ts` [...] Title Here
2 of 23
23
Styled components allow you to work with nested DOM selectors, too. For example: const ButtonComponent = styled.button` border: 1px solid var(--color-secondary); padding: 0.5rem; `; You can then have your own wrapping component somewhere where you know this ButtonComponent might be part of, and you can target it specifically to be a child of this Something component's p tag: const Something = styled.container` border: 1px solid var(--color-primary); padding: 1rem; h2 { font-size: 2rem; } p { opacity: 0.8; ${ButtonComponent} { margin-left: 0.5rem; } } `; Your JSX might look like this:
Bla
Bla bla
Not every element needs to have its own Styled-Components declaration. Semantic HTML is supposed to be targeted like this. It's a weaker specificity, but since it's encapsulated in a Styled-Component with generated unique classNames, you'll be more than fine. It's much more intuitive, IMO.How did styled components even become popular?
I’m not advocating one way or the other here, but these are the reasons I remember it being popular: Naming things (css classes) is hard. There are entire frameworks/patterns out there dedicated to this concept (BEM, etc). Styled components gets rid of this concept altogether, meaning you only have to write styles, not manage class names that might eventually become obsolete as your code evolves, without many easy/desirable ways to keep your css clean. Merging JSX with css felt, to some, like a natural next step since the point of JSX was to merge html and js. “Why should css be any different?” was the take. The advantage over inline styles was simply that you can’t do pseudo classes or other complex selectors (:hover etc) inline, but you can with the added library. I have used it before, and never really had any performance issues. There’s no argument that it adds some amount of overhead, but the tradeoff of performance vs. perceived ease-of-use is dependent on your use case, needs, and preference. More on reddit.com
50
69
August 5, 2024RIP Styled-Components. Now What?
CSS-modules or Linaria, Linaria would be closer to a drop in replacement. More on reddit.com
163
163
April 2, 2025styled-components dead - alternatives or better way to achieve wanter results?
As much as I can't stand Shopify, Shopify restyle has been great to work with More on reddit.com
8
1
May 9, 2025Styled-components entering maintenance mode
RIP. Great solution for its time. Author should be proud of their accomplishments. Edit: We stand on the shoulders of those who came before us. The “obvious” solutions we take for granted today were informed by the successes and failures of those who made the effort to solve these problems in the past. More on reddit.com
167
229
March 28, 2025Videos
React
react.dev › reference › react-dom › components › style
<style> – React
The built-in browser <style> component lets you add inline CSS stylesheets to your document.
Smashing Magazine
smashingmagazine.com › 2020 › 07 › styled-components-react
How To Use Styled-Components In React — Smashing Magazine
July 23, 2020 - Perhaps the first thing you’ll notice about styled components is their syntax, which can be daunting if you don’t understand the magic behind styled components. To put it briefly, styled components use JavaScript’s template literals to bridge the gap between components and styles. So, when you create a styled component, what you’re actually creating is a React component with styles.
MUI
mui.com › system › styled
styled() - MUI System
If you inspect this element with the browser DevTools in development mode, you will notice that the class of the component now ends with the MyThemeComponent-root, which comes from the name and slot options that were provided. In addition to this, the color, sx, and variant props are not propagated to the generated div element. If you would like to remove some of the MUI System specific features, you can do it like this: const StyledComponent = styled('div', {}, { name: 'MuiStyled', slot: 'Root', - overridesResolver: (props, styles) => styles.root, // disables theme.components[name].styleOverrides + skipVariantsResolver: true, // disables theme.components[name].variants + skipSx: true, // disables the sx prop }); CopyCopied(or $keyC)
DEV Community
dev.to › pancompany › styled-components-why-you-should-or-should-not-use-it-23c
Styled-Components: Why you should (or should not) use it - DEV Community
February 29, 2024 - This allows you to very easily change the look of your component, caused by a change in your data. This is a major benefit compared to regular CSS, in which you would have to inject a different classname for each different styling. If you want to style your React component based on a prop, you can do that like so:
Emotion
emotion.sh › docs › styled
Emotion – Styled Components
styled is a way to create React components that have styles attached to them. It's available from @emotion/styled.
npm
npmjs.com › package › styled-components
styled-components - npm
2 weeks ago - styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! It also supports React Server Components (RSC) through automatic runtime detection.
» npm install styled-components
LogRocket
blog.logrocket.com › home › using styled-components in react
Using styled-components in React - LogRocket Blog
June 4, 2024 - The styled API allows us to create a StyledComponent — a component with styles, as the name implies — by using either a regular HTML element or another StyledComponent as a base.
GitHub
github.com › styled-components
styled-components · GitHub
Server components, client components, streaming SSR, React Native—one API. ... A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️ ... A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️ · There was an error while loading. Please reload this page. styled-components/xstyled’s past year of commit activity
DEV Community
dev.to › elijahtrillionz › complete-guide-on-how-to-use-styled-components-in-react-360c
Complete Guide On How To Use Styled-components In React - DEV Community
February 19, 2022 - The theme prop is passed as a prop to all of our styled components that are children to the React App component by default.
Josh W. Comeau
joshwcomeau.com › react › demystifying-styled-components
Demystifying styled-components • Josh W. Comeau
June 21, 2021 - When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used.
GitHub
github.com › styled-components › styled-components
GitHub - styled-components/styled-components: Fast, expressive styling for React. Server components, client components, streaming SSR, React Native—one API.
Fast, expressive styling for React. Server components, client components, streaming SSR, React Native—one API. - styled-components/styled-components
Starred by 41K users
Forked by 2.5K users
Languages TypeScript 90.1% | JavaScript 9.6% | HTML 0.3%
GeeksforGeeks
geeksforgeeks.org › reactjs › react-styled-components-module
React styled-components Module - GeeksforGeeks
July 23, 2025 - React Styled-component Module allows us to write CSS within JavaScript in a very modular and reusable way in React. Instead of having one global CSS file for a React project, we can use styled-component to enhance the developer experience.
Josh W. Comeau
joshwcomeau.com › css › styled-components
The styled-components Happy Path: my personal suite of “best practices” • Josh W. Comeau
January 25, 2021 - styled-components is a wonderfully powerful styling library for React, and over the years I've learned a lot about how to use it effectively. This article shares my personal “best practices”.
freeCodeCamp
freecodecamp.org › news › styled-components-in-react
How to Use Styled Components in Your React Apps
October 16, 2024 - Styled-components is a library that allows you to write CSS in JS while building custom components in Reactjs. There are multiple options you can go with to style a React application.
Robin Wieruch
robinwieruch.de › styled-components
Styled Components Best Practices - Robin Wieruch
April 11, 2021 - A comprehensive list of Styled Components Best Practices for React developers ...
GitHub
github.com › styled-components › awesome-styled-components
GitHub - styled-components/awesome-styled-components: A curated list of awesome styled-components resources 💅
Atomic Layout - Layout composition as a physical React component. react-raster - Advanced Grid-System, highly customizable and ready for SSR. react-flex-ready - FlexBox grid system with flex-gap property.
Starred by 3.4K users
Forked by 274 users
Medium
medium.com › @isphinxs › organizing-css-with-react-styled-components-7c64bed2272b
Organizing CSS in React with Styled Components | by Samantha Ostrowski | Medium
November 7, 2021 - Styled components are a simply and intuitive way to add CSS to your React components and keep your styles organized.
Medium
jessicasalbert.medium.com › react-styling-made-easy-with-styled-components-7ecaa4b15c71
React styling made easy with Styled Components | by Jessica Salbert | Medium
November 12, 2020 - Cue: React Styled Components. This library allows you compartmentalize your CSS by creating modular style components. The CSS for one component is completely isolated from that of another, in its own styling sandbox.