我想使用 CSS 样式设置 JS 文件的样式，但出现错误

Question

import React from 'react'
import './myStyle.css'
function Stylesheet(){
    return(
        <div>
            <h1>Stylesheet</h1>
        </div>
    )
}
export default Stylesheet

This I'm getting an error

./src/Components/stylesheet.js Module not found: Can't resolve './myStyle.css' in 'D:\Documents\WebProject\React\hello-world\src\Components'

Answer 1

There is no need to create a component for styling a component. Just write your css style and import it like import './myStyle.css'

Answer 2

There are different options to style React components.I will explain few options here.

CSS Stylesheet:

Add a Stylesheet.css file as below.

.boxColor {
  background-color: red;
}
    

Add a component Stylesheet.js . Simply import css file 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;

Inline styling : In React, inline styles are not specified as a string. Instead they are specified with an object.

Add Stylesheet.js file.

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;

• We can create a variable that stores style properties and then pass it to the element like style={boxColor}
• We can also pass the styling directly style={{background-color: 'red'}}

There few more ways like Styled-component and CSS Modules to style react component.

Answer 3

for example,you have two files, first is practice.js and second is style.css then import your style.css in practice.js as following.

practice.js file

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

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

and your style.css file is

.heading{
     color: white;
     background-color:  black;
}