Skip to content

Repro for an issue regarding global styles not updating

Notifications You must be signed in to change notification settings

saleebm/mui-repro-global-styles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Next.js with TypeScript example

How to use

Download the example or clone the repo:

curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2  material-ui-next/examples/nextjs-with-typescript
cd nextjs-with-typescript

Install it and run:

npm install
npm run dev

or:

Edit on CodeSandbox

The idea behind the example

The project uses Next.js, which is a framework for server-rendered React apps. It includes @material-ui/core and its peer dependencies, including emotion, the default style engine in Material-UI v5. If you prefer, you can use styled-components instead.

The link component

Next.js has a custom Link component. The example provides adapters for usage with Material-UI.

  • The first version of the adapter is the NextLinkComposed component. This component is unstyled and only responsible for handling the navigation. The prop href was renamed to.

    import Button from '@material-ui/core/Button';
    import { NextLinkComposed } from '../src/Link';
    
    export default function Index() {
      return (
        <Button
          component={NextLinkComposed}
          to={{
            pathname: '/about',
            query: { name: 'test' },
          }}
        >
          Button link
        </Button>
      );
    }
  • The second version of the adapter is the Link component. This component is styled, it leverages the link component of Material-UI with NextLinkComposed.

    import Link from '../src/Link';
    
    export default function Index() {
      return (
        <Link
          href={{
            pathname: '/about',
            query: { name: 'test' },
          }}
        >
          Link
        </Link>
      );
    }

About

Repro for an issue regarding global styles not updating

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published