The sx Prop

The sx prop is used to add extra styles to components. It can be used to overwrite styles for internal layers of the component specifically for that instance. The prop accepts the default CSS properties that are available with the added functionality of access to the theme object. It has built in media query support, pseudo classes, CSS variables and more.

CSS Property

import { Box } from "@prismane/core";

const Page = () => {
  return (
    <Box
      sx={{
        overflowY: "scroll",
      }}
    >
      Hello, world
    </Box>
  );
};

export default Page;

Theme Object

import { Box } from "@prismane/core";

const Page = () => {
  return (
    <Box
      sx={{
        overflowY: (theme) => (theme.mode === "dark" ? "scroll" : "auto"),
      }}
    >
      Hello, world
    </Box>
  );
};

export default Page;

Class Names

import { Box } from "@prismane/core";

const Page = () => {
  return (
    <Box
      sx={{
        ".Box-root" {
          background: red;
        }
      }}
    >
      Hello, world
    </Box>
  );
};

export default Page;

Nesting Styles

import { Box } from "@prismane/core";

const Page = () => {
  return (
    <Box
      sx={{
        "--custom-color": "#ffffff",
      }}
    >
      <Box cl="var(--custom-color)">Hello, world</Box>
    </Box>
  );
};

export default Page;

Media Queries

import { Box } from "@prismane/core";

const Page = () => {
  return (
    <Box
      sx={{
        "@media (min-width:320px)": {
          display: "none",
        },
      }}
    >
      Hello, world
    </Box>
  );
};

export default Page;

Pseudo Classes

import { Box } from "@prismane/core";

const Page = () => {
  return (
    <Box
      sx={{
        ":hover": {
          display: "none",
        },
      }}
    >
      Hello, world
    </Box>
  );
};

export default Page;

Go BackStyle Props

Up NextColor Palette