Increasing specificity - overriding CSS

[cosmith]

Hi, we're in the process of migrating our app to emotion. Up until now we used normal CSS with bootstrap.
I ran into an issue where I want to style a component but the bootstrap CSS has a higher specificity because of nested rules (in my case I'm trying to style a navbar button).

const SidebarSubLi = styled("li")`
    background-color: #0068bf;
`;

const SidebarSubLink = styled(TrackedLink)`
    &:hover {
        background-color: green;
    }
`;

this CSS takes precedence:

.navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>li:not(.active)>a:focus, .navbar-fixed-side.navbar-inverse .navbar-nav .dropdown-menu>li:not(.active)>a:hover, .navbar-fixed-side.navbar-inverse .navbar-nav>li:not(.active)>a:focus, .navbar-fixed-side.navbar-inverse .navbar-nav>li:not(.active)>a:hover {
    background-color: #0371ca;
    color: #fff;
}

I ran into this for Glamorous: https://glamorous.rocks/examples/#increase-specificity which injects an id on the body to increase specificity of all Glamorous-generated CSS, is there a similar mechanism available with emotion?

Thanks in advance for your suggestions.

• emotion version: 9.2.1
• react version: 16.2.0

[Andarist]

It's possible, but u'd have to create ur own instance of emotion to add a stylis plugin. I've created this plugin for u - https://github.com/Andarist/stylis-plugin-extra-scope . Keep in mind that I have just written it (and written few tests), so it might not work as u expect - however at this moment I have no idea how it could be improved. Try it out and let know if it's working for your use case 😉

import * as React from 'react'
import createEmotion from 'create-emotion'
import createEmotionStyled from 'create-emotion-styled'
import extraScopePlugin from 'stylis-plugin-extra-scope'

const emotion = createEmotion({}, { stylisPlugins: [extraScopePlugin('#extra-scope')] })
const { css, cx, injectGlobal, keyframes } = emotion
export { css, cx, injectGlobal, keyframes }

const styled = createEmotionStyled(emotion, React)
export default styled

You can then just import those created versions of styled, css, cx, injectGlobal & keyframes from your module instead of directly importing it from react-emotion.

[esamattis]

I hit this too. I was supposed to make a small SPA to work on top of WordPress admin interface. But it turned out to quite difficult as WordPress admin UI has a lot very global selectors which style plain inputs etc.

@Andarist your plugins seems to work great, thank you!

[Andarist]

I guess this issue can be closed then, feel free to comment further though - or create a new issue.

[eugeneoshepkov]

@Andarist Works like a charm, thanks! I think it should be put in the emotion docs somewhere since this case might be quite common

[dearlordylord]

What is the recommended way for the newest package versions?
I'm asking because of the comment #1082 (comment) which assumes create-emotion shouldn't be used ideally. I've also tried the solution in this issue (#712 (comment)) and it caused me a similar to aforementioned #1082 problem.

[tcjcodes]

Hi, I'm wondering this as well. I have a similar issue where I'm using a class-based library (Bulma) that I'm trying to migrate over and I'm having a hard time finding solutions for increasing specificity in Emotion. Is stylis-plugin-extra-scope still the recommended solution?

---

Edit: I've tried this with no luck, not sure if it's because I'm using Gatsby? /:

import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/core';
import React from 'react';
import extraScopePlugin from 'stylis-plugin-extra-scope';

const myCache = createCache({
    key: 'testkey', // Working for class names, but styles are not applied
    stylisPlugins: [
        extraScopePlugin('#extra-scope') // Not working
    ]
});

const StyleCacheProvider = (props) => (
    <CacheProvider value={myCache} {...props} />
);

const MyApp = () => (
<StyleCacheProvider>
              // page contents, where styles are not working /:
</StyleCacheProvider>
)

[Andarist]

@tcjcodes if you share a runnable repro case I could take a look at your issue

[didibear]

@Andarist @tcjcodes Here is a working CodeSandbox with the above example:

https://codesandbox.io/s/increase-css-specificity-e8k5u?file=/index.js

EDIT: It works if everything is wrapped in a <div id="extra-scope">, I updated the sandbox.

[tcjcodes]

It's happening in my project but I wasn't able to repro it, which means something's funky with my setup. Thanks for the example! Even the solution is helpful in that case