@giapspzoo/create-sx-style-sheet

A simple util that allows you to create stylesheets of sx Material UI objects with TypeScript support.

Installation

Install the package:

npm i @giapspzoo/create-sx-style-sheet

Usage

Basic example:

import createSxStyleSheet from '@giapspzoo/create-sx-style-sheet';

const styles = createSxStyleSheet({
  container: {
    p: 1, // We can use MUI aliases.
    color: 'green'
  },
  button: {
    border: 'solid 1px';
  }
});

export default styles;

Merging stylesheets:

Use mergeSx to merge stylesheets.

Using the previous approach — that is, the spread operator with TSxProperty — is no longer recommended.

import { mergeSx } from '@giapspzoo/create-sx-style-sheet';

const style1 = createSxStyleSheet({
  root: {
    background: 'black',
  }
});

const style2 = createSxStyleSheet({
  root: {
    color: 'white',
  }
});

const Container: React.FC = () => (
  <Box sx={mergeSx(style1.root, style2.root)}>
);