React中Stylesheet组件的primary={false}属性不生效问题

文件夹结构 #

代码文件 #

Stylesheet.js #

import React from 'react'
import "./mystyle.css "

function Stylesheet() {
  return (
    <div>
      <h1 className="primary">Dhoni</h1>
    </div>
  )
}

export default Stylesheet

App.js #

import './App.css';
// import Myroutes from "./Myroutes.js";
import Stylesheet from './Stylesheet';

function App() {
  return (
    <>
      <Stylesheet primary={false} />
    </>
  );
}

export default App;

mystyle.css #

.primary {
  color: orange;
}

.font-xl {
  font-size: 52px;
}

现状说明 #

未使用Myroutes.js文件，控制台无报错。

预期效果 #

文本“Dhoni”不应用任何CSS样式，显示为默认黑色。

核心问题是Stylesheet组件没根据传入的primary props动态控制class，不管传true还是false，h1都固定带primary类，所以一直显示橙色。

修改Stylesheet.js代码：

import React from 'react'
import "./mystyle.css" // 去掉路径末尾的空格，避免潜在问题

function Stylesheet(props) {
  return (
    <div>
      {/* 根据props.primary的值决定是否添加primary类 */}
      <h1 className={props.primary ? "primary" : ""}>Dhoni</h1>
    </div>
  )
}

export default Stylesheet

修改后，当App中传入primary={false}时，h1的class为空，不会应用.primary的橙色样式，显示默认黑色；传入primary={true}则会触发橙色样式。

内容的提问来源于stack exchange，提问作者kdqdmmg0