styled-components doesn't work with material-ui

Question

my question is what is the different between this two { styled }??

import { styled } from "@mui/system";
 
and

import styled from "styled-components";

---------------------------

hi friends,

i am using material-ui with reactjs to create a website, then i want to add my custom style with help styled-component to the material-ui components ( Specifically, I want to change the AppBar style ) .

But I faced 2 problem.

1. First problem

i am try to create my custom design with styled-component library:

import styled from "styled-components";

but i must use so many ( !important ) to change the design, like this:

import styled from "styled-components";
import AppBar from "@mui/material"

const CustomNavbar = styled(AppBar)`
  background-color: red !important;
  position: relative !important;
  color: yellow !important;
`;

2.Second Problem - ( it is work without any problem )

i searched for custom styling mui-components then i use the { styled } from mui,

import { styled } from "@mui/system";

and it is work without any problem ..

import { styled } from "@mui/system";
import AppBar from "@mui/material"

const CustomNavbar = styled(AppBar)`
  background-color: red;
  position: relative ;
  color: yellow;
`;

so my question is

what is the different between this two { styled }??

import { styled } from "@mui/system";
 
and

import styled from "styled-components";

Thank you very much for giving me time and answering this question.

Answer 1

There is section in documentation of MUI about that, if you need to get rid of important, you need to wrap you app in

<StyledEngineProvider injectFirst>
      {/* Your component tree. Now you can override MUI's styles. */}
</StyledEngineProvider>

from mui, because it will change order of importing styles.

source: https://mui.com/guides/interoperability/#css-injection-order