styled-box

The true css in js, make css as props. lightweight and easy use.

Packages

• @styled-box/styled the core module, highly inspired by emotion and styled-system.
• @styled-box/react-primitives a copy from react-native-web, get the base components StyleSheet, View, Text, Image
• @styled-box/box combine styled, react-primitives, a generic component named Box to support most styles through props.

Examples

the total code can check this index.html, and need run a simple server.

createStyledBox

source

import { createStyledBox } from "https://esm.sh/@styled-box/styled";

const Div = createStyledBox("div");
const App = (props) => <Div marginTop={30} fontSize={40}>{"Hello World!"}</Div>;

result

<div style="margin-top: 30px; font-size: 40px;">
  Hello World!
</div>

Box

source

import Box, { View, Text, Image } from "https://esm.sh/@styled-box/box";

const App = (props) => 
  <Box marginTop={30}>
    <Box fontSize={40}>"Hello World!"</Box>;
  </Box>;

result

automatic generate className, it's benefit by react-native-web

<div class="css-1dbjc4n r-6ity3w">
  <div dir="auto" class="css-901oao r-xb2eav">Hello World!</div>
</div>

Supported Styled Props

reuse modules of styled-system, so same with its api, can check the links.

• Space       margin, marginTop, marginRight ...
• Color       color, bg, backgroundColor
• Typography    fontSize, textAlign, lineHeight ...
• Layout       width, height, overflow display ...
• Flexbox      alignItems, alignContent, flexDirection ...
• Background    backgroundImage, backgroundSize ...
• Border       border, borderTop, borderRight ...
• Position      position, zIndex, top, right ...
• Shadow      textShadow, boxShadow