css Question posted in
Some basic documentation can be found here.

Css – Apply !important to SVG fill property

im trying to apply !important to the fill property of a SVG file but it seems that the syntax here is wrong, the !important is not applied to the fill property and the circle element is rendered with black color.

I’m wondering how to apply !important to the fill property of SVG in react

<circle className="cls-1" cx="84.194" cy="83.49" r="83.48" style={{fill:'url('#linear-gradient') !important', strokeWidth:'0px'}} />
Tags:

2

Answers


  1. 0

    Please check your usage of backticks ' in style attribute,

    <circle className="cls-1" cx="84.194" cy="83.49" r="83.48" style={{fill:'url('#linear-gradient !important')', strokeWidth:'0px'}} />

    Also please ensure, #linear-gradient is a valid element.

    Login or Signup to reply.
  2. 0

    In the style attribute, ensure that !important is appended directly after the value of the fill property, separated by a space. This modification ensures that the fill property is rendered with the desired gradient URL, prioritized by the !important declaration.

    <circle
  className="cls-1"
  cx="84.194"
  cy="83.49"
  r="83.48"
  style={{
    fill: 'url('#linear-gradient') !important',
    strokeWidth: '0px'
  }}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search