Skip to content

Demonstration of global vs. local scope problem w/ css imports with antd, nextjs, and styled-components.

Notifications You must be signed in to change notification settings

brandonmp/styled-components-next-scope

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Deploy to now

  1. clone repo
  2. cd, yarn, etc.
  3. yarn dev

You'll see two links.

One leads to a Button from antd-react with styles applied like so

import Button from 'antd/lib/button';
import styled from 'styled-components';
import Styles from 'antd/lib/button/style/index.css';

export default styled(Button)`
    ${Styles};
`;

The other injects styles globally:

import Button from 'antd/lib/button';
import { injectGlobal } from 'styled-components';
import Styles from 'antd/lib/button/style/index.css';

injectGlobal`${Styles}`;
export default Button;

Global works. The first example (the scoped) does not, despite the fact that the styles are ostensibly injected into the head of the document.

About

Demonstration of global vs. local scope problem w/ css imports with antd, nextjs, and styled-components.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published