A guide on changing the style of a Layout component in React

Question

A guide on changing the style of a Layout component in React

Currently, I am utilizing Next.js alongside Material-UI as the framework of choice.
Within my project, there is a Layout component that encapsulates the content with Material-UI's <Container>.
I desire to customize the style of the Layout component in order to remove the width limitations on the background and have it span across the entire screen.

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>
  )
}

https://i.stack.imgur.com/ulahn.png

Using the Layout component proves useful for most scenarios, but there are instances where I need to supersede specific styles within Layout from the child components.

In this particular situation, how can I override the style of the Layout component that enforces a maxWidth constraint?

I attempted to include {width: '100vw'} within the styles of pages/index.js, however, it was ineffective.

Any guidance on this matter would be greatly appreciated.

Access the SandBox Here

css reactjs material-ui next.js

Answer 1

Answer №1

I found a solution to this issue by utilizing the power of 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);

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

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

Answer 2

I found a solution to this issue by utilizing the power of 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);

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

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

A guide on changing the style of a Layout component in React

Answer №1

Similar questions

Having trouble locating a module? I've developed a simple React NPM package, but encountered an issue with the message "Module Not Found."

What's the most efficient method for updating dependencies in various npm projects simultaneously?

`inline-block elements are centered when displayed in Firefox`

Instructions on how to eliminate the minutes button from Material UI datetime picker

CSS Dropping Down Menu Design

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Tips on personalizing the DateTimePicker component from Material-UI

Exploring the ‘ref’ feature in React alongside Material-UI

Enhance your SVG progress circle by simply selecting checkboxes

Running Jest encounters errors when there is ES6 syntax present in the node modules of a create-react-app project

CSS: Setting the minimum width of a table in your web design

The TablePagination component of Material-UI's Mui-datatables is displaying an error because the page prop is exceeding the defined

A guide to customizing the label color in Material-UI's <TextField/> component

The autoComplete feature in my ReactJs form is not functioning properly

There seems to be an issue with the CSS header alignment as the logo is not properly positioned using a top margin of -20px

Bringing in two JavaScript files with identical names

What could be the underlying reason behind this error message: TypeError - Unable to access property 'key' as it is undefined

Unlocking the secrets of the <g> element within an SVG with the power of ReactJS

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

Utilizing the React TypeScript useContext hook with useReducer for state management