Can we incorporate the radix-ui/colors variables into a CSS module file?

For my personal project, I am incorporating Radix components alongside radix-ui/colors. However, when attempting to import color variables into the CSS Module, I encountered an error. It seems that using the :root selector in the _app file is necessary, as importing colors from the global stylesheet does not impact the component.module.css files, resulting in the variables' values not being read.

Here's the content of the globals.css file:


@import '../../node_modules/@radix-ui/colors/blackA.css';
@import '../../node_modules/@radix-ui/colors/green.css';
@import '../../node_modules/@radix-ui/colors/mauve.css';
@import '../../node_modules/@radix-ui/colors/violet.css';
@import '../../node_modules/@radix-ui/colors/whiteA.css';

And here's the content of the _app file:

import '../styles/globals.css'
import NiceModal from '@ebay/nice-modal-react'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <NiceModal.Provider>
      <Component {...pageProps} />
    </NiceModal.Provider>
  )
}

I'm wondering if there is a way to effectively utilize color variables with Next.js and vanilla CSS without resorting to the styled-components / stitches approach recommended in the Radix documentation. Attempting to import variables directly into the module.css files resulted in an error.

cssnext.jsimportbundleradix

Answer №1

If you bring in the color palettes that you want to utilize within globals.css, you will be able to access the basic css variables globally across all your css modules. Suppose you wish to apply these colors in a custom Button.js component (apologies for not using Typescript):

globals.css:

@import "@radix-ui/colors/blue";

/* any other global styles... */

_app.js:

import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
};

button.module.scss:

.btn {
    color: var(--blue3);
    background: var(--blue9);
}

Button.js:

import styles from "@/styles/button.module.scss";

export default function Button (props) {
    return (
        <button className={styles.btn}>
            {props.children}
        </button>
    );
};

If you prefer to use them as Sass variables, you can create a partial where each CSS variable is linked to a Sass variable and include it in any modules as needed

_colours.scss:

$accent1: var(--blue1);
$accent2: var(--blue2);
$accent3: var(--blue3);
...

button.module.scss:

@use "./colours";

.btn {
    color: colours.$accent3;
    background: colours.$accent9;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am struggling to apply custom CSS styles to the scrollbar within a Card component using MUI react

import React from "react"; import Card from "@mui/material/Card"; import CardActions from "@mui/material/CardActions"; import CardContent from "@mui/material/CardContent"; import CardMedia from "@mui/material/Ca ...

javascriptcssreactjsmaterial-ui

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

Height of cells is often overlooked in webkit browsers

When adjusting tbody and thead heights, I noticed that webkit does not behave like other browsers. I've set the height of td. Here is an example of what I am referring to: link The question at hand is - which browser is displaying correctly? And ho ...

htmlcsswebkithtml-table

What is the most efficient way to destructure the `tutor` object in my code in order to minimize its size

I'm having some issues with repetitive code in my tutor listing. Is there a better way to structure the code below? How can I destructure the tutor object? const Tutors = ({ tutors }) => { return ( <div> {tutors.map((tutor) => ...

reactjsnext.js

Adjust and position any svg element to fit the entire viewport

Forgive me for being just another person to ask this question. Despite my efforts, I have yet to find a solution. I am trying to resize "any" svg to fit the entire viewport, centered. Take for example this svg element: <svg baseProfile="full& ...

pythoncsssvgsvgwrite

"NextAuth encounters an issue while trying to fetch the API endpoint: req.body

Trying to implement authentication in my Next.js app using NextAuth.js, I've encountered an issue with the fetching process. Here's the code snippet from the documentation: authorize: async (credentials, req) => { const res = await fetch ...

javascriptreactjsnext.jsnext-auth

Establishing the State Within the useEffect Hook

I am struggling to update my state with an array of objects in my code. It successfully populates an empty form with fetched data, but setting the state to that data is not working. Below is the snippet of my code: const [postMItems, setPostMItems] = useS ...

for-loopnext.jsreact-hooksstrapi

What is the most effective method for updating a className in Next.js using CSS Modules when a button is activated?

Looking to create a responsive navigation bar that transforms based on screen size? When the width reaches 600px, I'd like to hide the links and instead show a clickable nav button that reveals those options. Upon inspecting my list elements in the c ...

javascriptreactjsnext.jscss-modulesclassname

Tips for using jQuery to dynamically apply CSS styles to new content added to a webpage

I have encountered this question multiple times on stackoverflow and through google search, but unfortunately none of the suggested solutions have worked for me. My issue involves a page that loads an HTML page with empty sections, which are then dynamica ...

jquerycssdynamic

Issue with API causing Redux initial state problems

One issue I am facing is with fetching all products from the database and setting them into the Redux initial state. I created an action called SET_PRODUCTS_LIST where I pass the fetched products as payload in the component (I am using next js). Everything ...

reactjsreduxnext.js

Incrementing counters within nested div elements

Looking to implement a counter-increment feature on ordered lists. The goal is for each ol to pick up where the previous count left off. The functionality is successful when there are no separate wrapping divs around the ols. However, the issue arises whe ...

htmlcsscss-counter

Tips for accessing values from a dynamically generated functional component in next.js

My component count is variable and changes dynamically. I add function components based on the count and then need to retrieve the values of their variables. const MainComponent: React.FC<Props> = ({ fields, label, addCount }) => { const co ...

next.jsstate

Highlight the parent item when the child item is being hovered over

I am working on a menu that has 2 submenus. I want to use jQuery to highlight the item when it is hovered over. However, I am struggling with how to also highlight the parent item when the cursor is on the child item. The class I am using for highlighting ...

javascriptjquerycss

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

I have a simple Single Page Website built with Angular. I utilized ng-repeat to generate content on the main page, where each item is an image. I am looking to create an alternate view for each image to display more details. I have implemented this feature ...

javascripthtmlcssangularjs

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

I have implemented code in my css file to hide specific items from the topbar on my website. When I view the site on my desktop and inspect it with mobile view, the hidden items appear correctly concealed. However, when I access the website on my phone, ...

cssmobile

Retrieve a dynamic hex color variable for Tailwind CSS using Next.js

I need to dynamically change the colors based on a hex code retrieved from a database. In my variables.js file: const primaryColor = "#000000"; const secondaryColor = "#ff0000"; const notCheckedColor = "#9CA3AF"; export { primaryColor, secondaryColor, no ...

reactjsnext.jstailwind-cssnext.js13

iPhone-compatible iFrame with adaptable webpage dimensions

While attempting to embed our page on a client's site, everything looks great in a browser and our media queries are functioning properly. However, we encountered an issue when viewing the embedded page inside an iframe on an iDevice. It seems that th ...

ioscssiframeresponsive-designmobile-safari

Troublesome button appearance

I set up two sections to gather user information using buttons. My goal is for the button styles to change when clicked, making it clear to users which option they have selected, even if they switch between sections. However, I encountered an issue where ...

javascripthtmlcss

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

javascripthtmlcssgoogle-chrome

Exploring the art of CSS box-shadow and playing with margins

In one of my blog posts, I've applied CSS box-shadow to the <img> elements. To ensure that they adjust their size along with the column, I have set max-width:100%. However, the box-shadow spills over into the margins due to its rendering outsid ...

layoutmargincss