Styled API

You can create a component by using the styled API.

import { styled } from "@desygna/desygna";

export const Container = styled.div({
  backgroundColor: "red",
  padding: "10px",
  borderRadius: "5px"
});

With Custom Props

The styled API can take custom props as arguments.

import { styled } from "@desygna/desygna";

export type ContainerType = {
  fullWidth?: boolean;
};

export const Container = styled.div<ContainerType>(({ fullWidth }) => ({
  width: fullWidth ? "100%" : "auto"
}));

Example

import React from "react";
import { styled } from "@desygna/desygna";

const Button = styled.button({
  marginLeft: "10px",
  border: "none",
  borderRadius: 8,
  background: "blue",
  color: "white",
  cursor: "pointer"
});

export type BoxType = {
  fullWidth?: boolean;
};

const Box = styled.div<BoxType>(({ fullWidth }) => ({
  backgroundColor: "red",
  color: "white",
  display: fullWidth ? "block" : "inline",
  width: fullWidth ? "100%" : "auto"
}));

export default function App() {
  return (
    <Box>
      <Box fullWidth>
        1
        <Button>Button</Button>
      </Box>
      <Box>
        2
      </Box>
    </Box>
  );
}