What is the best way to access CSS variables declared in the root element?

For my React project, I have defined color variables. I want to create my own color palette for the DevExtreme pie chart UI component.

:root {
--my-pastel: var(--rose) var(--beige) var(--bright-orange) var(--brighter-orange) var(--bright-rose) var(--bright-red);
}

Within my function, I need to register the palette:

import { registerPalette } from "devextreme/viz/palette";

const MyPastel = ?

registerPalette("My Pastel", MyPastel);

Within my component:

 <PieChart
            
                dataSource={dataSource}
                palette="MyPastel"
            
            >
                <Series
                    argumentField="category"
                    valueField="value"
                >
                    <Label visible={true} />
                </Series>
                <Legend visible={true} />
            </PieChart>

How can I accomplish this?

I have attempted using computedStyle and other mapping methods but without success.

javascriptcssreactjsdevexpress

Answer №1

Give this a shot.

Styling with CSS

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
}

JavaScript

import { registerPalette } from "devextreme/viz/palette";

const getCssVaribleValue = (variableName) => 
    getComputedStyle(document.documentElement).getPropertyValue(variableName);

const palleteColors = [
    getCssVaribleValue('--blue'),
    getCssVaribleValue('--indigo'),
    getCssVaribleValue('--purple'),
    getCssVaribleValue('--pink'),
    getCssVaribleValue('--red'),
];

const pallete = { simpleSet: palleteColors };
registerPalette("My Pastel", pallete);

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

Utilizing component state or props within Redux mapDispatchToProps operations

As a newcomer to Redux/React, I am still grappling with the concept of dispatch in the Redux environment. Currently, my approach to issuing Redux actions within components involves directly calling the dispatch() function from my component props: const ma ...

javascriptreactjsreduxreact-redux

AngularJS: Updated URL but no content displayed on the page

I have separate modules for my login page, which uses the loginApp module, and my home page, which utilizes the myApp module. Upon submitting on the login page, I aim to direct users to home.html. Within my index.html (login page), the script is as follow ...

javascriptangularjsngroute

After deployment, certain formatting elements appear to be skewed in the React application

After developing a React app with create-react-app, everything was working perfectly. However, upon deployment, I noticed that some styles weren't showing up as expected. The majority of the styling from Material UI is intact, but there are a few dis ...

cssreactjsdeploymentmaterial-uistyles

Basic jQuery template design

Currently, I am developing a user interface that allows users to add or delete items with a similar layout. The process starts with one item and by clicking 'add', more items can be added. These items come in several different types. My current ...

javascriptjqueryhtml

Issues with content overlapping within Bootstrap can arise when elements are

Struggling with my band website development using Bootstrap. Inexperienced in web design, I'm facing difficulties getting elements to align properly without slipping under each other. Looking for insights and suggestions on how to avoid manual CSS adj ...

jqueryhtmlcsstwitter-bootstrapfrontend

Displaying parent component when URL changes in Vue Router for child components

Currently, I am delving into the world of Vue and encountering an issue with nested routers. Despite defining some child routers in the routes, whenever I access the child route, the parent component continues to be displayed. Below is the snippet of my co ...

javascriptvue.jsvue-router

Deliver transcluded data to the descendant element of a hierarchical roster

I understand that there have been similar questions asked before, but my situation is slightly different. I am currently constructing a nested list and I want to include custom HTML content in each grandchild element alongside some common HTML. The problem ...

javascriptangulartypescript

What could be causing the CSS border to not show up on the webpage?

I am trying to add a border to the footer, but it seems like something is blocking it from showing properly. Below are the CSS lines I have used: position: fixed; bottom: 0; right: 0; left: 0; clear: both; line-height: 1.36em; padding: 08px 0px 0px; tex ...

css

index.html: using jquery for selecting colors

I attempted to integrate a jQuery plugin into my application, but it doesn't seem to be working. In the head section of my code, I have included: <link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> <script ...

jquerycss

Conceal / reveal with jQuery

I am attempting to hide all divs and only display those connected with the "button" class. However, I'm encountering an issue where only the last div is visible, regardless of which div/button was clicked. EDIT: Here is the complete HTML code: < ...

javascriptjquery

Having issues with setting up nodejs on kali linux

Whenever I try to execute the configure script ./configure for nodejs installation, it fails to run successfully. Traceback (most recent call last): File "./configure", line 19, in <module> from distutils.spawn import find_executable ModuleN ...

javascriptnode.js

Tapping elsewhere on the screen will not result in the select box closing

I'm currently troubleshooting an issue with the site filter feature. When the btn-select is open and I click outside the panel, the select remains open. I am looking to create an event that will detect when the dropdown is closed so that I can close t ...

javascriptjquerycsstwitter-bootstrap

What is the best way to send extra information to getserversideprops in Next.js from a separate page?

To successfully transfer the projectID from the previous page(/projects) to the destination page (/project/[projectName]), I need to execute an API endpoint request containing the projectID in order to retrieve specific project details. What would be the ...

reactjsnext.jsserver-side-rendering

Looking to extract the first URL from a string using JavaScript (Node.js)?

Can someone help me figure out how to extract the first URL from a string in Node.js? " <p> You left when I believed you would stay. You left my side when i needed you the most</p>**<img src="https://cloud-image.domain-name.com/st ...

javascriptnode.js

Can the data retrieved from a jsonp call that may be considered "bad" be utilized effectively?

When making a JSONP call to another domain, I am receiving data that is in JSON format but not wrapped in a function. This causes a parse error to occur. However, the data is still retrievable and visible. Despite the error, is it possible to utilize the ...

javascriptjqueryajaxjson

BackboneJS struggles to redirect to .fail when an API request exceeds the timeout

I'm a newbie to backbone and I've come across some interesting code that adds Deferred to enable the use of promises. Take a look at the snippet below: getPatientInfo: function fetch(options) { var deferred = $.Deferred(); Backbone.Model.p ...

javascriptjquerybackbone.jsjquery-deferred

What is the best way to transform an array of objects in JavaScript?

I'm working with an array of objects that I need to transform into a table by pivoting the data. In other words, I am looking to generate a new array of objects with unique titles and nested arrays of key-value pairs. Can someone please assist me in a ...

javascriptarrays

Identify all td inputs within a TR element using jQuery

Is there a way to retrieve all the input values within each table cell (td) of a table row (tr) using jQuery? Suppose I have a tr with multiple td elements, and some of these tds contain inputs or select elements. How can I extract the values from these in ...

javascriptjquery

How do popular social media platforms such as Facebook and Twitter utilize real-time APIs to display live updates in news feeds

I'm curious about the technology being used for real-time updates, and I doubt they rely on AJax methods like setInterval() to make server requests every second. This approach could be inefficient with a large number of concurrent users. Do you think ...

javascriptjqueryajaxfacebooktwitter

How to trigger a click event in React using TypeScript and material-ui library

Currently, I am facing an issue when trying to update the value of material-ui TextFields from the store. When manually typing inside the field, everything works fine as expected with the handleChange() and handleBlur() functions handling the events. Howev ...

reactjstypescriptmaterial-ui