JasonMore/styled-components-class-bloat

Styled-Components class bloat

Shows an example of how using too many string templates as mixins vs the documented way of extending styles will lead to bloat

bad templateString/Body.tsx http://localhost:3000/?whichComponent=templateString

import { box } from "../styles/box.styles";
import React from "react";
import styled from "styled-components";

const BoxDiv = styled.div`
  ${box}
`;

const Body: React.FC = () => {
  return (
    <BoxDiv>
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </BoxDiv>
  );
};

export default Body;

good extend/Body.tsx http://localhost:3000/?whichComponent=extend

import { BoxDiv } from "../styles/box.styles";
import React from "react";

const Body: React.FC = () => {
  return (
    <BoxDiv>
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </BoxDiv>
  );
};

export default Body;