unstyled-components
styled-components based on React's style prop
My favorite CSS-in-JS API has been in React from day one.
— Sebastian Markbåge (@sebmarkbage) May 31, 2018
Example
import React from "react";
import isPropValid from "@emotion/is-prop-valid";
import { styled, ThemeProvider } from "@stereobooster/unstyled-components";
const H1 = styled("h1", {
shouldForwardProp: prop => isPropValid(prop) && prop !== "color"
})(props => ({
color: "hotpink",
background: props.theme.background
}));
export const StyledTest = () => (
<ThemeProvider theme={{ background: "#000" }}>
<H1 color="lightgreen">This is lightgreen.</H1>
</ThemeProvider>
);
Why?
...