#Override library css classes in globals.scss not working.

1 messages · Page 1 of 1 (latest)

sage latch
#

Using the globals.scss, how can I override a css class from an imported css file

lucid scarabBOT
#

Hi @sage latch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the knowledge sources provided, it seems that there are some issues with CSS order in Next.js, especially when trying to override styles from an imported CSS file. This issue has been reported multiple times on GitHub, with users experiencing erratic and unpredictable behavior, especially in production mode.

One user suggested a workaround by using SASS and replacing globals.css with globals.scss. Then, you can import the external CSS file at the top of globals.scss and import it into the root layout once. However, this solution might not work for everyone.

Here is an example of how you might do this:

// globals.scss
@import "../node_modules/bootstrap/scss/bootstrap.scss";

// Your overrides here
.someClass {
  // Your styles here
}

Then, in your root layout:

// layout.js
import './globals.scss';

However, please note that this is a workaround and might not work in all cases. The issue seems to be ongoing in Next.js and might be fixed in a future update.

For more information, you can refer to these GitHub issues:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sage latch kapa.ai is still learning and improving, please let us know how it did by reacting below

sage latch
#

@lucid scarab how can I add overrides in modules as well?

lucid scarabBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I'm sorry, but the provided knowledge sources do not contain specific information on how to add overrides in modules using Next.js or any related technology. It would be helpful to know more about the context in which you're trying to add these overrides. Are you referring to CSS modules, JavaScript modules, or some other type of module?

In general, overriding styles or functionality in a module would depend on the specific module system and the language or framework you're using. In CSS modules, for example, you might be able to override styles by increasing the specificity of your selectors or using !important, although the latter is generally discouraged.

For more accurate information, I would recommend referring to the official Next.js documentation or the documentation of the specific technology you're using.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sage latch kapa.ai is still learning and improving, please let us know how it did by reacting below

sage latch
#

@lucid scarab Instead of using the globals.scss, how can I override a css class from an imported css file inside of a scss module

lucid scarabBOT
#

Let me check the knowledge base for you. One moment! :books:

#

To override a CSS class from an imported CSS file inside of a SCSS module, you can follow these steps:

  1. Import the external CSS file at the top of your SCSS module file.
  2. Define your overrides below the import.

Here's an example:

// Button.module.scss
@import "../node_modules/bootstrap/scss/bootstrap.scss";

// Your overrides here
.btn {
  // Your styles here
}

Then, in your component file:

// Button.js
import styles from './Button.module.scss';

export function Button() {
  return (
    <button className={styles.btn}>
      Click me
    </button>
  )
}

Please note that this is a workaround and might not work in all cases due to the CSS order issues in Next.js. The issue seems to be ongoing in Next.js and might be fixed in a future update.

For more information, you can refer to these GitHub issues:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sage latch kapa.ai is still learning and improving, please let us know how it did by reacting below

sage latch
#

@lucid scarab would that still work even though webpack hashes class names in modules?

lucid scarabBOT
#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js, when you use CSS Modules, the class names are indeed hashed by Webpack during the build process. This is done to ensure that the class names are unique and do not conflict with each other, especially when you're using third-party libraries.

However, when you import your styles from a CSS Module into a React component, you get an object where the keys are your original class names and the values are the hashed class names. You can then use these hashed class names in your component.

Here's an example:

// styles.module.css
.myClass {
  color: red;
}

// MyComponent.js
import styles from './styles.module.css';

function MyComponent() {
  return <div className={styles.myClass}>Hello, world!</div>;
}

In this example, styles.myClass will be a string containing the hashed class name that Webpack generated for .myClass.

So, even though the class names are hashed, you can still override them in your CSS Module by defining your overrides below the import, as I mentioned in my previous message.

However, please note that there are some reported issues with class names minification in Next.js, which might affect the behavior of your overrides. You can refer to these GitHub issues for more information:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sage latch kapa.ai is still learning and improving, please let us know how it did by reacting below

sage latch
#

@lucid scarab How does that work with overriding library css classes

lucid scarabBOT
#

Let me check the knowledge base for you. One moment! :books:

#

When you're using CSS Modules in Next.js, the class names are locally scoped by default. This means that they won't affect or be affected by styles defined in other files, including those in libraries.

However, if you want to override a class from a library, you can use global class selectors. In your CSS Module, you can define global styles using :global(). The styles inside :global() will not be locally scoped, and can therefore be used to override classes from libraries.

Here's an example:

// styles.module.scss
@import "../node_modules/bootstrap/scss/bootstrap.scss";

:global(.btn) {
  // Your overrides here
}

In this example, the styles inside :global(.btn) will override the .btn class from Bootstrap.

Please note that using :global() should be done sparingly, as it can lead to naming conflicts and make your styles harder to manage. It's generally better to use locally scoped styles whenever possible.

For more information, you can refer to the Next.js documentation on CSS Modules (https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@sage latch kapa.ai is still learning and improving, please let us know how it did by reacting below

sage latch
#

I'm getting the error Selector ":global(.t-form)" is not pure (pure selectors must contain at least one local class or id) @lucid scarab

lucid scarabBOT
#

Let me check the knowledge base for you. One moment! :books:

#

The error message you're seeing, Selector ":global(.t-form)" is not pure (pure selectors must contain at least one local class or id), is related to the way Next.js handles CSS Modules.

In Next.js, a pure selector in a CSS Module must contain at least one local class or id. This means that you can't use :global() on its own to target a global class or id. You need to combine it with a local class or id.

Here's an example of how you can do this:

// styles.module.scss
.localClass :global(.t-form) {{
  // Your overrides here
}}

In this example, the styles inside .localClass :global(.t-form) will apply to any element with the class t-form that is a descendant of an element with the class localClass.

This issue has been reported in the Next.js GitHub repository. You can refer to these issues for more information:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: