import * as React from 'react';

import { alpha, styled } from '@mui/material/styles';

​

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

​

const CssTextField = styled(TextField)({

  '& label.Mui-focused': {

    color: 'green',

  },

  '& .MuiInput-underline:after': {

    borderBottomColor: 'green',

  },

  '& .MuiOutlinedInput-root': {

    '& fieldset': {

      borderColor: 'red',

    },

    '&:hover fieldset': {

      borderColor: 'yellow',

    },

    '&.Mui-focused fieldset': {

      borderColor: 'green',

    },

  },

});

​

export default function CustomizedInputs() {

  return (

      <CssTextField label="Custom CSS" id="custom-css-outlined-input" />

  );

}

const customCSS = {

    marginTop: '5rem',  

}

​

<bilalahmed_dev style={customCSS}>

    https://bilal-dev-portfolio.azeemlab.com/

</bilalahmed_dev>

​

import * as React from 'react';

import { StyledEngineProvider } from '@mui/material/styles';

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

​

export default function GlobalCssPriority() {

  return (

    <StyledEngineProvider injectFirst>

     <Box className="example"></Box>

    </StyledEngineProvider>

  );

}

​

// Styled Engine Provider uses prop injectFirst, which will inject the

// styles at the top precedence and any plain CSS class can be used to

// style the element in question. 

​

import * as React from 'react';

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

​

export default function GlobalCssPriority() {

  return (

   <>

     <Box sx={{

       width: "30px", 

       height: "30px", 

       border: "1px solid red"}}>

       marginLeft: "10px"

       </Box>

   </>

  );

}

​

// sx prop can be used to custom style or override the default syles

// of mui. Inside the object properties can be defined. 

// just remember to use camel case for properties with more than

// one word.