icms-mui-theme-fe

Introduction

This package uses MUI Theme & CSS Variables to provide default configurations for UI elements that align with design specifications.

Installation

Install the library:

npm i icms-mui-theme-fe

Usage

Wrap your App component with the ThemeProvider after importing theme from the package:

import {theme} from "icms-mui-theme-fe";

const render = (props: RootProps) =>
    root.render(
        <React.StrictMode>
            <ThemeProvider theme={theme}>
                <App {...props} />
            </ThemeProvider>
        </React.StrictMode>,
    );

Overriding Default Styles

You can still override these styles following CSS' Specificity Hierarchy:

Priority 	Example 	Description
Inline style 	<h1 style=""> 	Highest priority, directly applied with the style attribute
Id selectors 	#navbar 	Second highest priority, identified by the unique id attribute of an element
Classes 	.test, :hover 	Third highest priority, targeted using class names
Attributes 	[type="text"] 	Low priority, applies to attributes
Elements	 h1, ::before 	Lowest priority, applies to HTML elements and pseudo-elements (MUI Theme)

https://www.w3schools.com/css/css_specificity.asp

Using sx props (similar to using style attribute)

import Button from '@mui/material/Button';

function MyComponent() {
  return (
    <Button
      variant="contained"
      sx={{
        backgroundColor: 'custom value',
        '&:hover': {
          backgroundColor: 'custom value',
        },
      }}
    >
      Custom Button
    </Button>
  );
}

Using a Custom CSS file

.custom-button {
  background-color: #0057B2;
  &:hover {
    background-color: #102A47;
  }
}

import './custom-styles.css';

function MyComponent() {
  return (
    <Button className="custom-button" variant="contained">
      Custom Button
    </Button>
  );
}