如何在 React 中覆盖 Layout 组件的样式？答案

【问题标题】：How to Override the style of Layout component in React?如何在 React 中覆盖 Layout 组件的样式？
【发布时间】：2021-04-30 21:38:24
【问题描述】：

我正在使用带有 Material-UI 作为框架的 Next.js。
我有 Layout 组件，它使用 Material-UI <Container> 包装内容。
我想覆盖限制背景宽度的 Layout 样式，使背景扩展到全屏。

components/Layout.js

import { Container } from '@material-ui/core';

export default function Layout({ children }) {
  return <Container>{children}</Container>;
}

pages/_app.js

import Layout from '../components/Layout';

...
<Layout>
  <Component {...pageProps} />
</Layout>
...

pages/index.js

export default function App() {
  return (
    <div style={{ backgroundColor: "yellow" }}>
      Home Page
    </div>
  )
}

在大多数情况下使用 Layout 组件会派上用场，但有时我确实想从子组件中覆盖某些样式的 Layout。

在这种情况下，如何覆盖设置 maxWidth 限制的 Layout 组件的样式？

我尝试在 pages/index.js 的样式中添加{width: '100vw'}，但没有成功。

任何帮助将不胜感激。

Link to the SandBox

【问题讨论】：

看起来Layout 组件不接受除儿童以外的任何道具。获取所有道具并将它们传递给Container元素。 ({ children, ...restProps }) 然后像这样在Container 中传播...restProps，<Container {...restProps}>

标签： css reactjs material-ui next.js

【解决方案1】：

使用React Context 是我解决此问题的方法。

context/ContainerContext.js

import React from 'react';

const ContainerContext = React.createContext();

export default ContainerContext;

components/Layout.js

import React, { useState } from 'react';
import { Container } from '@material-ui/core';
import ContainerContext from '../context/ContainerContext';

export default function Layout({ children }) {
  const [hasContainer, setHasContainer] = useState(true);

  const Wrapper = hasContainer ? Container : React.Fragment;

  return (
    <ContainerContext.Provider value={{ hasContainer, setHasContainer }}>
      <Wrapper>{children}</Wrapper>
    </ContainerContext.Provider>
  );
}

pages/index.js

import { useContext, useLayoutEffect } from 'react';
import ContainerContext from '../context/ContainerContext';

export default function App() {
  const { setHasContainer } = useContext(ContainerContext);

  // Where the magic happens!
  useLayoutEffect(() => {
    setHasContainer(false);
  }, []);

  return (
    <div style={{ backgroundColor: "yellow" }}>
      Home Page
    </div>
  );
}

【讨论】：