大佬教程收集整理的这篇文章主要介绍了我想使用 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@还有其他一些方法,比如 Styled-component 和 CSS 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,请注明来意。