6. React styles, themes

Introduction

It seems not easy to use styles, but there are some alternatives:

Option 1: Using css files

Create a css file (for instance myStyles.css in the src/css folder)

.menu {
  transition: transform .2s; 
}

.menu:hover {
  transform: scale(1.05); 
  color: blue
}

Use it in your component (myStyledComponent.tsx)

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

import '../../css/myStyles.css';

function MyStyledComonent () {
  return (
    <Box className="menu">
	Hi!
    </Box>
  )
}

A problem I have found is that I don't know how to use the color blue[100] 

Option 2: Using "sx" 

Use the styles in your component (myStyledComponent.tsx)

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

import '../../css/myStyles.css';

function MyStyledComonent () {
  return (
    <Button 
        sx={{transition: "transform .2s",
            "&:hover": {
              borderColor:  red[500],
              transform: "scale(1.1)", 
              bgColor: blue[900],
            }
        
        }} 
        variant="outlined">

      Hover over me again!    
    </Button>
  )
}

Option 3: Assigning "sx" a "const"

See Jon Middaug, in this case, we can save the style definition in another file

import Box from '@mui/material/Box';
import blue from '@mui/material/colors/blue';
import { red } from '@mui/material/colors';

const myButtonStyle = {
    transition: "transform .2s",
    "&:hover": {
      borderColor:  red[500],
      transform: "scale(1.1)", 
      bgColor: blue[900],
    },
  };

function MyStyledComonent () {
  return (
    <Button sx={myButtonStyle} variant="outlined">
      Hover over me again!    
    </Button>
  )
}

Option 4: Using themes (more intricated!!)

ThemeEduTb.ts file is:

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      edutb: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    status?: {
      edutb?: string;
    };
  }
}

Now we need to create a "styled" element and a component to insert it

MyComponent.tsx file is

import InputLabel from '@mui/material/InputLabel';
import styled from '@mui/material/styles/styled';

const InputLabelEduTb = styled( InputLabel) (({theme }) => ({
    color: theme.status.edutb,
}))

export default function MyComponent() {
  return(
    <InputLabelEduTb theme={themeEduTb} > Hi! </InputLabelEduTb>
  )
}