如何间隔更改样式组件的styles？

Question

So I've got to make a sliding-to-the-left text for a website and I didn't complicate much, just took a codepen from Google and tried to implement it.... except that Codepen uses classic CSS and I'm using styled components. Basically, the code changes the class (which contains the style) of a div that contains the text at a set interval and together with the css animations we have a sliding text (I'll leave both the link and the code). I know how styled components work, at a basic level ( const Button = styled.button.. ). What I don't know, is how to change that style... the original pen works by changing the class of the component, I can't do that...

PS: There is no need for the text to change. I'll just leave the default one.

Link: CodePen Code:

 var title = ['<p>Every new beginning comes from some other beginning s end.</p>','<p>Even the genius asks questions.</p>','<p>It s better to burn out, than to fade away.</p>']; var index = 0; function change_title() { var x = title[index]; $('.main').html(x); index++; if (index >= title.length) { index = 0; } }; function change_left() { $('div').removeClass('slide-right').addClass('slide-left'); } function change_right() { $('div').removeClass('slide-left').addClass('slide-right'); change_title(); } function to_left() { setInterval(change_left, 10000); }; function to_right() { setInterval(change_right, 20000); }; to_left(); to_right();

 body { background-color: #add8e6; } h1 { text-align: center; margin: 2.5em;} div.main { width:90%; overflow:hidden; background-color: #2F5168; margin: 2.5em auto; height: auto; border: 2px solid gray; padding: 1.2em 0; font-size: 1.5em; font-family: "Agency FB"; color: #E4F6F8; } div.slide-right p { -moz-animation: 10s slide-right; -webkit-animation: 10s slide-right; -o-animation: 10s slide-right; animation: 10s slide-right; margin:0; } div.slide-left p { -moz-animation: 10s slide-left; -webkit-animation: 10s slide-left; -o-animation: 10s slide-left; animation: 10s slide-left; margin:0; } @-webkit-keyframes slide-right { from { margin-left: 100%;width: 300%; } to {margin-left: 0%;width: 100%;} } @-moz-keyframes slide-right { from { margin-left: 100%;width: 300%; } to {margin-left: 0%;width: 100%;} } @-o-keyframes slide-right { from { margin-left: 100%;width: 300%; } to {margin-left: 0%;width: 100%;} } @keyframes slide-right { from { margin-left: 100%;width: 300%; } to {margin-left: 0%;width: 100%;} } @-webkit-keyframes slide-left { from {margin-left: 0%;width: 100%;} to {margin-left: -100%;width: 300%;} } @-moz-keyframes slide-left { from {margin-left: 0%;width: 100%;} to {margin-left: -100%;width: 300%;} } @-o-keyframes slide-left { from {margin-left: 0%;width: 100%;} to {margin-left: -100%;width: 300%;} } @keyframes slide-left { from {margin-left: 0%;width: 100%;} to {margin-left: -100%;width: 300%;} }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main slide-right"> <p>It s better to burn out, than to fade away.</p> </div> <h1>An infinite loop of sliding text right to left</h1>

My code:

import React from 'react';
import styled from 'styled-components';

const HeroContainer = styled.div`
    width: 100%;
    background-color: #fdf3eb;
    padding: 60px 0px 60px 0px;
`

const HeroBannerText = styled.h1`
    -moz-animation: 10s slide-right;
    -webkit-animation: 10s slide-right;
    -o-animation: 10s slide-right;
    animation: 10s slide-right;
    margin:0;
`

class HeroBanner extends React.Component{
    changeLeft = () => {
        HeroBannerText
    }

    render(){
        return(
            <HeroContainer>
                <HeroBannerText>We'll Unsplash you with images all day long.</HeroBannerText>
            </HeroContainer>
        );
    }
}

export default HeroBanner;

import React from 'react'
import styled, { createGlobalStyle } from 'styled-components'
import Navbar from './components/Navbar'
import HeroBanner from './components/HeroBanner'

const GlobalStyle = createGlobalStyle`
  @font-face{
    font-family: robotoRegular;
    src: url(./fonts/Roboto-Regular.ttf);
  }

  @-webkit-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
  @-moz-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
  @-o-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
  @keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }

  @-webkit-keyframes slide-left { from {margin-left: 0%;width: 100%;}
  to {margin-left: -100%;width: 300%;} }
  @-moz-keyframes slide-left { from {margin-left: 0%;width: 100%;}
  to {margin-left: -100%;width: 300%;} }
  @-o-keyframes slide-left { from {margin-left: 0%;width: 100%;}
  to {margin-left: -100%;width: 300%;} }
  @keyframes slide-left { from {margin-left: 0%;width: 100%;}
  to {margin-left: -100%;width: 300%;} }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle/>
      <div>
        <Navbar/>
        <HeroBanner/>
      </div>
    </>
  );
}

export default App;

Answer 1

A simple approach to achieve your functionality is to use Passed props and state hooks to dynamically change styles. For more complicated logic you could take a look at Theming . Example:

const Colored = styled.p`
    color: ${props => props.color}
`

function Component() {
    const [color, setColor] = useState('red');
    
    return (
        <>
            <Colored>Some text here</Colored>
            <Button onClick = {() => setColor('blue')}>Change color to blue</Button>
        </>
    )
}