An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
styled-components and treat
One can say that copying is a higher form of appreciation. And here I am implementing styled-components "pattern" for the third time:
This time I implemented styled-components (more like proof of concept, not a final version) for treat. Treat is themeable, statically extracted CSSinJS with nearzero runtime. There other statically extracted CSSinJS solutions, like astroturf and linaria. The main problem with those solutions they don't work with CRA out of the box. treat doesn't work with CRA yet as well, but there is a hope.
Code example
Here is example repo, which shows how to use it.
You declare styles like this:
import { style } from "treat";export const base = style({ outline: "none", padding: "0.325rem 0.625rem"});export const themed = style(({ primary }) => ({ background: primary}));export default [base, themed];
- It has TypeScript support, so it will complain about illegal CSS.
- It has the same benefits as CSS modules
- It supports theming
Component itself looks like this:
import { styled } from "@stereobooster/react-treat-styled";import styles from "./button.treat";const Button = styled.button(styles);const App = () => <Button onClick={() => alert("test") }></Button>
Here are tradeoffs of using treat. I haven't tried it for real-life projects yet, but let's see.
What do you think about treat?
Original Link: https://dev.to/stereobooster/styled-components-and-treat-2gjb
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To