styled-components doesn't work with material-ui - reactjs

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.
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