是否可以在反应应用程序的 .js 文件中使用 css？

Question

我想映射 .js 文件。我也需要应用一些 CSS。是否可以将 CSS 放在 .js 文件中？

1. 我在 src > Constant > AboutMyselftProgressCount.js 有一个常量文件，它的代码如下：

   const AboutMyselfProgressCount = [ { ProgressCountTitle: "用户访问者", }, { ProgressCountTitle: "网页设计", }, { ProgressCountTitle: "UI 设计", }, { ProgressCountTitle: "插图", }, ] 导出默认 AboutMyselfProgressCount;

2. 现在我在 src > Routes > Home > Components > AboutMyself > Components > SkillsContent 有另一个 .js 文件 代码如下：

   从“反应”导入反应 从 'react-bootstrap' 导入 { Row, Col }

   const 技能 = (props) => { 返回 （

   {props.ProgressCountTitle}

   > ) } 导出默认技能；

基本上在本节中，我有一些与props 一起使用的东西

1. 现在，我在 src > Routes > Home > Components > AboutMyself > index.js 有另一个 .js 文件，我在其中映射来自 1 号和 2 号的数据

代码如下：

import React from 'react'
import './style.scss';
import Skills from '../AboutMyself/Components/SkillsContent/index'
import AboutMyselfProgressCount from '../../../../Constant/AboutMyselfProgressCount'

const AboutMyself = () => {
    return (
        <>
        <div className='AboutMyselfBackground'>
            <div className='AboutMyselfContent'>
                <div className='content'>
                <p>ABOUT MYSELF</p>
                <h4>
                I’m a Creative director based on New York, who loves clean, simple & unique design. I also enjoy crafting..
                </h4>
                <a href=''>DOWNLOAD RESUME</a>
                <div className='borderTop'></div>
                {
                    AboutMyselfProgressCount.map((val, ind) => {
                        return (
                            <Skills
                                key={ind}
                                ProgressCountTitle={val.ProgressCountTitle}
                            />
                        )
                    })
                }
                <div className='skillsPara'>
                    <p>
                        Proin laoreet elementum ligula, ac tincidunt lorem accumsan nec. Fusce eget urna ante. Donec massa velit, varius a accumsan ac, tempor iaculis massa. Sed placerat justo sed libero varius vulputate.
                    </p>
                </div>
                </div>
            </div>
            </div>
        </>
    );
}
export default AboutMyself;

我只想在 ProgressCountTitle 下显示一个技能进度条，这是使用 css 完成的。那么这是否可以使用对象数组、对象数组作为对象的键值等将进度条的 css 放置在 1 号文件中。

我希望大家都清楚我的问题。

Answer 1

React 的 CSS 组件是 Styled-Component。您可以在同一个 JS 文件中专门设计您的元素，并通过唯一的元素名称分配它们。 https://styled-components.com/

这个例子直接取自他们的文档

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

Answer 2

当然可以

只需创建任何.css 文件并导入反应组件。

import './App.css'

然后您可以简单地将您的类名添加到您的 JSX，如下所示。

<div className='myclass'>
     hello world
</div>

如果您想要阻止全局样式和使用基于组件的本地样式等模式高级功能，您还可以在 reactjs 中使用 css 模块。

你需要将css文件命名为anyfilename.module.css

那么你需要像这样导入：

import classes from './anyfilename.module.css'

然后您可以将样式类添加到 jsx，如下所示：

<div className='myclass'>
     hello world
</div>

了解更多click here