Target a css class in 'a component generated by library' in react

user_14053169 0
Viewed 641

I have used a chart library. I want to target and modify the properties of the CSS class generated by that library using external CSS. Let's assume the code in inspector is like this-

<div id="apexcharts9xagqubx" class="apexcharts-canvas apexcharts9xagqubx apexcharts-theme-light" style="width: 319.5px; height: 200px;">
  <svg id="SvgjsSvg1001" width="319.5" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" class="apexcharts-svg apexcharts-zoomable hovering-zoom">
<div>

the apex chart documentation says I can target .apexcharts-canvas and change the background color. I have done this:

import React from "react";
import ReactApexChart from 'react-apexcharts'
import './apex.module.css'
return (
  <div id="chart">
    <ReactApexChart options={data.options} series={data.series} type="area" height={200}/>
  </div>
);

inside apex.module.css I did this:

.apexcharts-canvas{
  background-color: black;
}

now what?
looks like it doesn't work.

react-component reactjs css
2 Answers

It looks like a CSS specifity thing.

You could try including the parent in the selector:

#chart .apexcharts-canvas {
  background-color: black;
}
user_21571280

Hey friend when you import a css file with module prefix you shouldn't import that way, that kind of file will be imported giving it a name for example in this image: enter image description here

enter image description here

This works equally with css extension files, since I am doing it with scss, this rule is for all css file types. When you declare with module it's not a global style anymore but a style for a component because there is another way to import it but without the prefix module, in the image I already showed you the name of the declared name and then the name of the class. Luckily my friend, it is not so complicated, I am also learning this little by little.

user_119093410
Related