程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了我想使用 CSS 样式在 React 中设置 JS 文件的样式,但出现错误大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决我想使用 CSS 样式在 React 中设置 JS 文件的样式,但出现错误?

开发过程中遇到我想使用 CSS 样式在 React 中设置 JS 文件的样式,但出现错误的问题如何解决?下面主要结合日常开发的经验,给出你关于我想使用 CSS 样式在 React 中设置 JS 文件的样式,但出现错误的解决方法建议,希望对你解决我想使用 CSS 样式在 React 中设置 JS 文件的样式,但出现错误有所启发或帮助;
import React from 'react'
import './myStyle.CSS'
function Stylesheet(){
    return(
        <div>
            <h1>Stylesheet</h1>
        </div>
    )
}
export default Stylesheet
@H_772_5@

这是我收到错误

./src/Components/stylesheet.Js Module not found: Can't resolve './myStyle.CSS' in 'D:\documents\WebProject\React\Hello-world\src\Components'

解决方法

无需创建组件来为组件设置样式。只需编写您的 css 样式并像 import './myStyle.css'

一样导入它 ,

React 组件的样式有不同的选项。我将在这里解释几个选项。

CSS 样式表:

添加一个 Stylesheet.css 文件,如下所示。

.boxColor {
  BACkground-color: red;
}
    
@H_772_5@

添加组件 Stylesheet.js。只需导入 css 文件 import './Stylesheet.css'

import React from 'react';
import './Stylesheet.css';

const Stylesheet = () => (
  <div className="boxColor">
    <p>Get started with CSS styling</p>
  </div>
);

export default Stylesheet;
@H_772_5@

内联样式:在 React 中,内联样式不指定为字符串。相反,它们是用一个对象指定的。

添加 Stylesheet.js 文件。

import React from 'react';

const boxColor = {
  BACkground-color: red;
};
    
const Stylesheet = () => (
 <div style={BoxColor}>
   <p>Get started with CSS styling</p>
 </div>
);
    
export default Stylesheet;
@H_772_5@
  • 我们可以创建一个存储样式属性的变量,然后通过 它到元素如 style={BoxColor}
  • 我们也可以直接传递样式style={{BACkground-color: 'red'}}

还有其他一些方法,比如 Styled-componentCSS Modules 来设计 React 组件的样式。

,

例如,您有两个文件,第一个是 practice.js,第二个是 style.css 然后将您的 style.css 导入practice.js 如下。

practice.js 文件

import React from 'react';
import './style.css'; //imporTing style sheet

export default function practice() {
     return (
          <div>
               <h1 className="heading">Hellooooooo</h1>    
          </div>
     )
}
@H_772_5@

你的 style.css 文件是

.heading{
     color: white;
     BACkground-color:  black;
}
@H_772_5@
      

大佬总结

以上是大佬教程为你收集整理的我想使用 CSS 样式在 React 中设置 JS 文件的样式,但出现错误全部内容,希望文章能够帮你解决我想使用 CSS 样式在 React 中设置 JS 文件的样式,但出现错误所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。