WinterCore / react-text-transition

Animate your text changes
MIT License
601 stars 26 forks source link

Background color CSS does not get applied #38

Open l30c0d35 opened 2 years ago

l30c0d35 commented 2 years ago

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 commented 2 years ago

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?

WinterCore commented 2 years ago

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.