* 更新 * -添加了一个工作代码沙箱，供您练习CLICK HERE

CSS的步骤：
1.创建CSS文件，如'styles.css'
1.在要使用的组件的顶部导入CSS文件
1.确保CSS文件中的名称与要使用它的className相同。（例如，如果css是.borderLiine{}，则classname应该是className='borderLine'
1.如果你在应用borderLine类时“看不到"hr，请确保你的颜色和背景颜色相互对比（例如，浅灰色，灰白色等在白色背景上很难看到）

快速修复

如果你想要最少的代码编辑/工作量，保持CSS不变，并将hr改为：

<hr className='divider' />

字符串
这将使分隔符CSS应用于hr。

发生了什么（问题解释）和其他解决方案

如果你想了解更多或保持borderLine作为类名：

• 问题是 *：你的CSS代码试图通过声明.divider{}（句点意味着className）来样式化一个名为'divider'的className，但是你拥有的hr className被称为'borderLine'，所以什么都没有发生。

要想让CSS生效，两个名称必须相同（且CSS文件必须导入）
看起来你想使用borderLine而不是divider作为className，要做到这一点，你只需要改变你的CSS声明或添加一个borderLine声明如下。
复制并粘贴这个来替换.divider css，它应该可以工作：

/*CSS FILE:(ex. styles.css)*/

.borderLine {
        margin: 2rem;
        width: 100%;
        color: white;
        border: 1px solid white; /* Adjust the color and style as needed */
      }

型

用法示例

关于borderLine (see working example in codesandbox)：

import './styles.css';
const Example = () = > {
  //example usage
  return <hr className='borderLine' />
}

型

此外，确保您正在导入css文件，无论您尝试使用它。（ex import './styles.css'）
或者

如果你想要内联样式的方法总是工作：（通常不理想，除非需要独特的样式，但它总是工作）

<hr style={{ 
   margin: "2rem", 
   width: "100%", 
   color: "white", 
   border: "1px solid white" 
}}/>

型
我强烈建议使用checking out this CodeSandbox，并将其与您的代码进行比较，因为它成功地使用您的borderLine类样式化和显示hr标记！

Click here for CodeSanbox Example

1.将CSS ClassName .divider更改为.borderLine
1.确保你正确导入了CSS。例如import "./style.css";

这个问题是，当我使用.borderLine的CSS，它不显示。

• 这是因为border: 1px solid white;边界线颜色为白色，我假设背景颜色也为白色

hr行只显示在使用.divider的页面上，但没有类名为. divider。

• 目标类名是borderLine from <hr className="borderLine" />。如果您在CSS中更改选择器名称.borderLine-> .divider，hr行将出现，因为没有样式将应用于hr元素。

尝试在css中改变边框的颜色，看看它开始出现（*如果边框颜色和背景相同，HR线技术上是存在的，但你看不到它 *）

<hr className="borderLine" />

个字符