5

Hi I have some scss color definitions in scss file:

$blue:                            #20a8d8;
$indigo:                          #6610f2 !default;
$purple:                          #6f42c1 !default;

$colors: (
  blue:                           $blue,
  indigo:                         $indigo,
  purple:                         $purple
)

And would like to use them when drawing react js charts:

import React, { Component } from 'react';
import {CardColumns, Card, CardHeader, CardBlock} from "reactstrap";
import {Line} from "react-chartjs-2";

const dataA = {
  labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
  datasets: [
    {
      label: 'Number of Customers in Shop A',
      fill: false,
      lineTension: 0.1,
      backgroundColor: red
    }]
};

I tried to use 'red' for backgroundColor but failed with error: 

Uncaught ReferenceError: red is not defined

Can anybody please tell me how to import color variables from scss to react js?

Martin
  • 5,714
  • 2
  • 21
  • 41
LOUDKING
  • 301
  • 1
  • 13
  • 1
    https://github.com/css-modules/css-modules/issues/86 – Paul Fitzgerald Sep 26 '17 at 12:53
  • 1
    Not answering you question but `backgroundColor: "red"` will work - you didn't quote it so it looked for a variable named red – StudioTime Sep 26 '17 at 12:55
  • Inorder to import scss variables into your react component class. You may refer to this forum: https://stackoverflow.com/questions/52900207/how-to-use-scss-variables-into-my-react-components. Only catch is to make sure you are using React 17 – Aditya Akella Mar 29 '22 at 12:54
  • Does this answer your question? [How to get SCSS variables into react](https://stackoverflow.com/questions/66119188/how-to-get-scss-variables-into-react) – Martin Mar 29 '22 at 12:55
  • @AdityaAkella The restriction regarding React 17 is not correct. There is no such restriction. – Martin Mar 29 '22 at 12:59
  • @Martin - Noted. I read a post suggesting other way round. But you are right! – Aditya Akella Apr 07 '22 at 19:17

0 Answers0