menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
Team

<StyledHeading /> is using incorrect casing. Use PascalCase for React…

October 30, 2020 at 10:06am

<StyledHeading /> is using incorrect casing. Use PascalCase for React components...

October 30, 2020 at 10:06am (Edited 3 months ago)
When I use yarn test to test my styled-components powered React component then I get following warning -
Warning: <StyledHeading /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
This happens when I separated out styled-components in a separate file and import it here.
The warning will disappear if styles constants are in same file.
ColorfulHeading.css.ts
import styled from 'styled-components';
export const StyledHeading = styled.h1`
font-size: 32px;
color: darkorchid;
`;
ColorfulHeading.tsx
import React from 'react';
import ColorfulHeadingTypes from './ColorfulHeading.types';
import Styles from './ColorfulHeading.css';
const ColorfulHeading: React.FC<ColorfulHeadingTypes> = ({ title}) => (
<React.Fragment>
<Styles.StyledHeading data-testid="colorful-heading-title">{title}</Styles.StyledHeading>
</React.Fragment>
);
export default ColorfulHeading;
Seeking inputs to fix this warning and still keeping styles file as a separate.

October 30, 2020 at 11:28am
(jake-prentice) Safe to assume that this is know thing and disabling this rule is the only option?
  • reply
  • like
not specifically about your problem tbh, but I got the same annoying messages when I tried naming the styled components <$ComponentName />, so I asked stackoverflow and they sent me that link. So I presume it's a common problem, someone correct me if I'm wrong.
  • reply
  • like
Interesting! I'm curious to read your SO post. Please share.
  • reply
  • like

October 31, 2020 at 1:26pm
I found that my naming convention was causing this issue. I changed ColorfulHeading.css.ts to ColorfulHeading.styles.ts.
(mxstbr) aware about this issue? Is this React specific?
  • reply
  • like