Styled ComponentsとMaterial-UIを一緒に使用するときに発生する問題

6503 ワード
material ui styled components テキストリンク
プロジェクトでMaterial-UIとStyle-Componentsを使用する場合、スケルトンはMaterial-UIを使用しますが、Style-Componentsで詳細を変更したい場合があります
例:
import Button from "@material-ui/core/Button";

Button: styled(Button)`
    border-right: 0.5px solid ${theme.GRAY_SCALE.LINE};
    width: 160px;
    height: 40px;
    font-size: 13px;
    font-weight: bold;
    color: ${theme.GRAY_SCALE.LABEL};
  `,
でも美味しくなかった.
これは、設定を行わない場合、Material-UIの<style>がStyled-Componentsの<style>よりも低くなるためである.したがって、「styled(Button)」`のような声明はキャンセルされます.
つまり、Vanilla JSでは、class="black pink"、このように宣言すれば、blackよりもpinkの方がblackよりも優先されるので適用するのと同じように、ここで表現するのであれば、class=styled-components Material-uiというような方式です.

ソリューション:

<StylesProvider injectFirst>を使用!
import { StylesProvider } from "@material-ui/core/styles";

const App = () => {
  return (
    <div className="App">
      <StylesProvider injectFirst>
        <MyRecoilRoot>
          <RecoilRoot>
            <Suspense fallback={<div>Loading...</div>}>
              <GlobalStyles />
              <Router />
            </Suspense>
          </RecoilRoot>
        </MyRecoilRoot>
      </StylesProvider>
    </div>
  );
};
このように、トップクラスの親にStylesProvider InjectFirstを適用すればよいのです~
これにより、優先順位がStyled-componentのstyleとなるため、問題なくスタイルを適用することができる.
もちろん使用する場所の親にも適用できますが、後で何度も重ねて使うと変な間違いが出てきます.この間違いが起こった理由はまだ分からない.

というエラーが出てきました~!😫
ほほえみ~!😎
圧縮後数世紀
Linuxバックグラウンド運転管理