Tips for creating SCSS shorthand for an Array value color within a property

I've got a SCSS file containing an array of color values.

export const COLORS = {
  transparent: 'rgba(0,0,0,0)',
  primary: '#09596e',
  primary01: '#317D92',
  primary02: '#6BADBF',
  primary03: '#97C6D2',
  primary04: '#D4E9EF',
  primary05: '#ECFAFF',
  primary06: '#9DBDC6',
  primary07: '#EDF2F2',
  primary08: '#009DAB',
  primaryLight: '#46869C',
  primaryDark: '#003043',
  secondary: '#E15A52',
  secondaryLight: '#FF8A7F',
  secondaryDark: '#A92629',
  textBlack: '#323030',
  textGray: '#757575',
  bgGray: '#E0E0E0',
  border: '#BDBDBD',
  rail: '#EEEEEE', // used for dividers, etc.
  bgLightGray: '#FAFAFA',
  white: '#FFFFFF',
  errorPink: '#EF7279',
  pink01: '#FFF5F5',
  yel01: '#EBA338',
  yel02: '#F5C173',
  yel03: '#E7C798',
  yel04: '#FBF6F0',
  yel05: '#FEFBEA',
  green01: '#34C84C'
};

I'm interested in updating my border style by utilizing one of the colors listed above. For example:

border: '1px solid #BDBDBD',
border-radius:' 1px 2px 1px #34C84C',

If anyone has a solution for dynamically replacing these hard-coded color values with the ones from the variables, I'd greatly appreciate your assistance. Thank you!

htmlcssreactjssassscss-mixins

Answer №1

To implement styling in React, styled-components is the recommended approach. You can find more information about styled-components at https://styled-components.com/

Once you have installed and set up styled-components, you have the flexibility to define and use colors in a convenient manner. Here's an example:

border: ${({ theme }) => `1px solid ${theme.colors.grey[2]}`,

If you prefer to use SCSS for styling, you can refer to @Vivek's response.

Answer №2

I came across a solution For instance:

border-radius:`1px solid ${COLORS.border}`,
border-radius:`1px 2px 1px ${COLORS.green01}`,

In react, I discovered a method on a different site where it needs to be integrated into the source code : styled-components https://styled-components.com/

Answer №3

I have come up with a solution that has proven to be effective for me. Start by creating a new file named custom-colors.scss and define variables as shown below:

$main: '#4A4767';

$accent1: '#A36A7E';

$accent2: '#B5C5CD';

$accent3: '#FDF6D0';

//Once the variables are set, import the file into your main styles.scss file like this:

@import 'assets/scss/custom-colors.scss';


//You can then utilize these colors in your code like so:

.bodyText {
    color: $main;
}

Enjoy!

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

Netlify Reports Gatsby Build Error

I am encountering a build error while trying to deploy my Gatsby WordPress experimental site on Netlify. Netlify support has confirmed that the issue lies in the build process and not with Netlify itself. However, I am unable to pinpoint the exact error c ...

reactjsnpmgraphqlgatsbynetlify

Is there a way to automatically refresh my page without having to manually reload it every time I update the state?

I'm struggling to automatically update the state in order for my page to reload without manual intervention. Currently, I have to refresh the page manually to see any changes in the quantity of the perfume. As a newcomer to this field, I would greatly ...

reactjsuse-state

Navigating to different pages using MUI AppBar

I'm diving into MUI and React for the first time. I decided to try out the "App Bar with responsive menu" example from MUI.com by copying the code into a JS file and referencing it in App.js. When I run the app, a menu pops up. The example code includ ...

reactjsmaterial-uiappbar

I'm feeling lost here - I initiated my server on port 50001, however, my React app seems to be running on port 3000. Could anyone assist me in identifying what might be

This is my unique server mjs file : import Express from "express"; const port = process.env.PORT || 50001; const app = Express(); import path from 'path' app.get('/abc',(req,res) => { console.log("Request IP &quo ...

node.jsreactjsexpressservernode-modules

Having trouble turning off a multi-select drop down option

Hello, I'm a newcomer to AngularJs and facing an issue with disabling my multiselect dropdown under a specific condition. Initially, I attempted to disable the dropdown using the following code: document.getElementById("multidropdown").disabled = tr ...

javascripthtmlangularjsdrop-down-menu

Incorporating XMLHttpRequest in my React Typescript App to trigger a Mailchimp API call, allowing users to easily sign up for the newsletter

My website needs to integrate Mailchimp's API in order for users to subscribe to a newsletter by entering their email into a field. I am looking to implement this without relying on any external libraries. To test out the functionality, I have set up ...

reactjstypescriptxmlhttprequestmailchimpmailchimp-api-v3.0

What is the significance of @format in the latest React Native App.js?

As I delved into developing a new Application using react native, I configured the necessary environment and stumbled upon the @format within the App.js file while opening it for the first time. Could someone shed light on what exactly is @format and why ...

androidiosreactjsreact-native

Guide to utilizing Axios cancelToken within interceptors

While working with ReactJs, I encountered a situation where I needed to use cancelToken in Axios to prevent duplicate requests when fetching data from an API. For example, if I am on the homepage and before the previous Axios request is completed, anothe ...

reactjsaxiostoken

Create a copy of a div element once the value of a select element has

After modifying a select option, I'm attempting to replicate a div similar to the example shown in this link: http://jsfiddle.net/ranell/mN6nm/5/ However, instead of my expected lists, I am seeing [object]. Any suggestions on how to resolve this issue ...

javascriptjqueryhtml

Delete any content that is not enclosed in tags

I am struggling with manually rendering Django forms and it's producing the following code. Is there a way to remove text without HTML tags, such as "Currently:" and "Change:", which are difficult to style with CSS? <div class="row align-cente ...

htmlcssdjangodjango-forms

Using clearfix on every div element is essential to avoid container collapsing

Would it be beneficial to include clearfix in every div element to avoid container collapse issues? Or is it more practical to apply it only to specific classes, like so? <div class="container"> Additional div elements... </div> .containe ...

htmlcss

The attempt to change the header's background color has proven to be unsuccessful

Hello this is my first question on stackoverflow so please forgive my lack of experience. I am attempting to modify the background color of an entire HTML document using the background-color property on the element. Despite changing some parts of the docu ...

htmlcssasp.net-mvcbootstrap-4

The jQuery toggle function is malfunctioning when applied to the rows of a table

I have been experimenting with toggling table rows using jquery. Initially, the state is hidden This feature is functioning properly $('.table tr.items.' + name).each(function() { $(this).show(); }); Furthermore, this snippet of code is wor ...

javascriptjquerycss

Tips on updating the content of an HTML element dynamically when it is already being populated using *ngFor

I have created an HTML component that utilizes *ngFor to dynamically generate HTML elements. This results in a total of 3 tags being generated when the code is run. I have included data such as subject in the component file which updates dynamically, how ...

htmlangulartypescripthttpclient

Restrict the character count in the input field according to its width

Is there a way to restrict the number of characters in an input field based on its width? I have a dynamic input field with varying widths and I would like users to be able to type without their text extending outside of the input boundary. Using maxLeng ...

javascripthtmlcss

Utilizing the retina pixel ratio media query in Internet Explorer 8

I'm currently working on a project to develop a responsive website using SASS/Compass, and I am incorporating retina icons by utilizing generated sprites. In my .scss file, I have created a mixin for including these icons. Here is my mixin for retina ...

cssinternet-explorer-8sassmedia-queriesretina

Having trouble with React's useEffect and React-Query's useQuery?

As a React newbie, I'm trying to implement global error handling using a context provider and a custom hook. Main Objective: Implementing a system to handle errors at the global level. The Issue: Errors reappear immediately after being removed. I s ...

javascriptreactjsreact-hooksreact-query

Prevent row stretching in React.js Material-ui DataGrid

Does anyone know if it is feasible to adjust the width of a row? I have rows containing JSON data that would be best displayed within a <pre> tag for easy viewing by users. However, I am facing challenges with this and wondering if there is a way to ...

reactjsmaterial-ui

refreshing the webpage with information from an API request

I am completely new to web development, so please bear with me. I am attempting to make a simple API call: const getWorldTotal = async () => { const response = await fetch('https://cors-anywhere.herokuapp.com/https://health-api.com/api/v1/cov ...

javascripthtml

Retrieving server information using AJAX in React

I've been attempting to utilize an AJAX call in order to fetch server data for my React Components. However, I'm encountering difficulties when it comes to displaying it with React as I keep receiving this error: Uncaught TypeError: Cannot read ...

javascriptjqueryajaxnode.jsreactjs