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

The onload event for windows does not fire

Ensure that you decode the URL before making any changes to the location in a

Material UI AppBar fixed position that is not part of a grid container

"Troubleshooting a matter of spacing in HTML5 body

Creating a Jquery method to handle multi-line ellipsis for long text

How can Cypress tests effectively interact with the React application?

The NGX-Graph nodes mysteriously change color to deep black when the third property is applied

The implementation of useState delays the application of dynamic styling

Creating a Drop-Down Button Using HTML, CSS, and JavaScript

Send a property as a string, then transform the string back into JavaScript

The module was not found: Unable to locate the file './AppAPI' in the project directory

What are the solutions for tackling the npm error when trying to resolve a package and encountering that it

Continuously animate a series of CSS properties

Creating a new project in ASP Net Core Angular using Bootstrap 4 for the SideMenu layout instead of Bootstrap 3

What causes the Material UI CheckBox to show up twice upon initial rendering?

What is the best way to incorporate SWRs pagination for effectively managing pagination within a URL structure?

Eliminate the option to display/hide password icon on Safari

Is there a way to make jQuery Validate display errors within the form elements rather than outside of them?

The sequence of execution in React hooks with Typescript

Approach to Using Bootstrap 4 with Intl-Tel-Input