A collection of styled component helpers
npm install --save styled-components-helpersimport styled from "styled-components";
import { prop, ifProp, inLessThan, theme } from "styled-components-helpers";
export default styled.section`
padding: 4em;
text-align: center;
background: papayawhip;
border-radius: ${prop("$borderRadius")};
padding: ${ifProp("$isSmall", "24px", "48px")};
> p {
font-size: 18px;
color: ${ifProp(
"$isSmall",
theme("darkDisabled"),
ifProp("$isDark", theme("disabledNote"), prop("$noteColor", "#323232"))
)};
}
${inLessThan("xs")`
background: #ccc;
`}
`;And the App.tsx file:
import React from "react";
import { render } from "react-dom";
import Wrapper from "./Wrapper";
const App = () => (
<Wrapper $borderRadius="20px" $isSmall={false}>
<p>Hello World, this is my first styled component!</p>
</Wrapper>
);
render(<App />, document.getElementById("root"));import styled from "styled-components";
import { prop, theme, ifProp, inLessThan, inGreaterThan, BreakpointEnum } from "styled-components-helpers";
export const StyledCircle = styled.div`
text-align: center;
${inLessThan("xl")`
fill: ${ifProp(
"$disabled",
theme("darkDisabled"),
ifProp("$isNote", theme("disabledNote"), prop("$noteColor"))
)};
width: 20px;
height: 20px;
`};
${inGreaterThan(BreakpointEnum.md)`
overflow: hidden;
margin-right: 1rem;
`}
`;MIT