如何每隔一段时间更改样式组件的样式

Question

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

附言：文本没有必要更改。我只留下默认的。

链接：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道具和状态挂钩来动态更改样式。对于更复杂的逻辑，你可以看看主题。示例：

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