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

Posted 2023-03-06

【中文标题】如何间隔更改样式组件的样式？

【英文标题】：How to change styles of a styled component at an interval?

【发布时间】：2021-07-13 10:34:17

【问题描述】：

所以我必须为一个网站制作一个向左滑动的文本，我并没有太复杂，只是从谷歌拿了一个 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;

【参考方案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>
        </>
    )