react-text-transition icon indicating copy to clipboard operation
react-text-transition copied to clipboard

Background color CSS does not get applied

Open l30c0d35 opened this issue 2 years ago • 2 comments

The transition text has a background color inside a h1 with a transparent background. The transition text's background color is not being affected by setting it to transparent. How would I set the <TextTransition> background color to be transparent?

<h1 className={styles.heading}>
    Some text ...
    <TextTransition
      className={styles.transitionText}
      text={ areas[index % areas.length] }
      springConfig={ presets.stiff }
    />
  </h1>

CSS

heading {
  background-color: transparent; // is being applied 
  ...
}

.transitionText {
  background-color: transparent; // is not being applied 
  ...
}

btw cool package and easy to use

l30c0d35 avatar Feb 02 '22 23:02 l30c0d35

it seems to be overwritten by a global style:

* {
  background-color: black;
}

but why doesn't the transitionText style overwrite it, as the heading style does?

l30c0d35 avatar Feb 03 '22 00:02 l30c0d35

Hey. Sorry for the delay, been a bit busy.

If you're still facing this issue you could you reproduce it in a codesandbox example because I couldn't reproduce it, setting the background color on the parent works properly.

Thanks.

WinterCore avatar May 20 '22 14:05 WinterCore