请让我知道如何将此React链接到css文件

cvxl0en2  于 2022-12-05  发布在  React
关注(0)|答案(1)|浏览(116)

I'm a freshman in html/css. As I just have studied html/css these days, I have problem while I'm studying.
I just want to link this React file to my css file, but I don't know how even if I search all the ways I can make it.
(1) React file

import styled, { keyframes } from "styled-components";

const Flow = () => {
    return (
        <Container>
         <FlowBox>
          <FlowWrap>
            <Flow>
              <span>King of pirates</span>
              <span>King of pirates</span>
              <span>King of pirates</span>
              <span>King of pirates</span>
            </Flow>
          </FlowWrap>
        </FlowBox>
        </Container>
    )
}
export default AboutFlow;

const Container = styled.div`
    margin:100px 0 0 0;
    border-top:1px solid #000;
    border-bottom: 1px solid #000;
`
const flowing = keyframes`
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
`

const FlowBox = styled.div`
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
`

const FlowWrap = styled.div`
    display: flex;
    top: 0;
    left: 0;
    align-items: center;
    width: 100%;
    height: 100%;
    white-space: nowrap;
`

const Flow = styled.div`
    font-size: clamp(15px, 10vw, 8rem);
    animation: ${flowing} 8s linear infinite;
    span{
        display:inline-block;
        font-weight:600;
        padding:0 20px;
    }

(2) My CSS file

@import "./react.css";
.title{
    background-image: url(../src/img/upper_blackbar_edit.png);
    min-width: 1000px;
    background-size:100% 50px;
}
.bg{
    width:100%;
    min-width: 1000px;
}
.logo{
    height:50px;
    vertical-align: top;
}
.map{
    min-width: 100%;
    width: 80%;
    object-fit: cover;
    display: block;
    top:10%;
    margin:auto;
}

.body{
    min-width: 1000px;
    background-image: url(../src/img/background.png);
    background-size:cover;
    overflow: scroll;
}

How can I see my css file linked with this react file? Please help me.
I want some concrete ways to do so.

dzhpxtsq

dzhpxtsq1#

import '(your css file path)';

    const Flow = () => {
        return (
            <Container className="(name your class)">
             <FlowBox className="(name your class)">
              <FlowWrap className="(name your class)">
                <Flow>
                  <span className="(name your class)">King of pirates</span>
                  <span className="(name your class)">King of pirates</span>
                  <span className="(name your class)">King of pirates</span>
                  <span className="(name your class)">King of pirates</span>
                </Flow>
              </FlowWrap>
            </FlowBox>
            </Container>
        )
    }

导入css文件,然后使用className,它将工作

相关问题