Javascript 如何在带有外部css文件的react项目中使用css配置样式

我真的很沮丧。我正在处理第一个react项目，无法使用外部文件配置样式。我有一个src文件夹，其中包含App.js和App.css文件，在这个文件夹中，我还包括一个组件文件夹。当我将样式信息写入同一个文件时，它正在工作：

import React, {Component} from 'react';
import { Link } from 'react-router-dom';

function Header() {
    return (
        <header >
            <h1>P-Software</h1>
            <p>
            <Link to="/Start" style={linkStyle}>Home</Link>

            </p>
        </header>
    )
}

const linkStyle = {
    color: '#fff',
    textDecoration: 'none',
}

export default Header;

使用：

导入“../App.css”

对于Header.js

它会起作用的。快乐编码

使用：

导入“../App.css”

对于Header.js

---

它会起作用的。快乐编码

找出真正的问题所在。只是需要 将元素声明为某个类，因为css正在查找它。 -->将style={…}更改为className=“…”

import'../App.css'；
//....
//错误的家
家
// ....

找出了真正的问题所在。只是需要 将元素声明为某个类，因为css正在查找它。 -->将style={…}更改为className=“…”

import'../App.css'；
//....
//错误的家
家
// ....

这正是我已经做过的？或者我这里出了点问题？这正是我已经做过的？或者我这里出了点问题？

import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import '../App.css';


function Header() {
    return (
        <header >
            <h1>P-Software</h1>
            <p>
            <Link to="/Start" style={linkStyle}>Home</Link>
            </p>
        </header>
    )
}

export default Header;

/*
some other styles
*/

.linkStyle {
  background-color: brown;
  color: '#fff';
  padding: '10px'
}

import '../App.css';

//....

// wrong  <Link to="/Start" style={linkStyle}>Home</Link>       
<Link to="/Start" className="linkStyle">Home</Link> 

// ....