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

Question

所以我必须为一个网站制作一个向左滑动的文本，我并没有太复杂，只是从谷歌拿了一个 codepen 并尝试实现它....除了 Codepen 使用经典CSS，我正在使用样式化组件。基本上，代码更改了 div 的类（其中包含样式），其中包含设置间隔的文本，并且与 css 动画一起，我们有一个滑动文本（我将留下链接和代码）。我基本了解样式化组件的工作原理 (const Button = styled.button .. )。我不知道的是如何改变那种风格...原来的笔是通过改变组件的类来工作的，我不能这样做...

PS：文字无需更改。我将保留默认的。

链接：CodePen 代码：

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>

我的代码：

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

实现功能的一种简单方法是使用Passed props 和状态挂钩来动态更改样式。对于更复杂的逻辑，您可以查看Theming。示例：

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>
        </>
    )
}