在 React 中设置边框 CSS 属性的样式

使用 border css 属性来设置React中元素的边框样式,例如 <div style={{border: '1px solid rgba(0,255,0,0.3)'}}>。 如果我们只需要设置特定边框的样式,请使用相应的属性,例如 borderBottom

const App = () => {
  return (
    <div>
      <div style={{border: '1px solid red'}}>Some content here</div>

      <br />

      <div style={{border: '1px dashed red'}}>Some content here</div>

      <br />

      <div style={{border: '1px solid rgba(0,255,0,0.3)'}}>
        Some content here
      </div>

      <br />

      <div style={{border: '2px dotted red'}}>Some content here</div>

      <br />

      <div style={{borderBottom: '2px dotted red'}}>Some content here</div>

      <br />
      <br />

      <div style={{borderTop: '2px dotted red'}}>Some content here</div>
    </div>
  );
};

export default App;

这些示例展示了如何在 React 中为元素的边框 CSS 属性设置样式。

请注意,我们必须将边框属性的值包装在一个字符串中。

<div style={{border: '1px solid rgba(0,255,0,0.3)'}}>
  Some content here
</div>

如果我们只需要设置特定边框的样式,例如 border-bottom,使用驼峰式属性名称 – borderBottom

<div style={{borderBottom: '2px dotted red'}}>Some content here</div>

多词属性名称在我们传递给 React 中 style 属性的对象中是驼峰式的。

或者,我们可以将样式写入扩展名为 .css 的文件中。

.red-border {
  border: 1px solid red;
}

下面是我们如何导入和使用 red-border 类。

// 👇️ import css file
import './App.css';

const App = () => {
  return (
    <div>
      <div className="red-border">Hello world</div>
    </div>
  );
};

export default App;

在 React 中导入全局 CSS 文件时,最好将 CSS 文件导入 index.js 文件。

index.js 文件是你的 React 应用程序的入口点,所以它总是会被运行。

另一方面,如果我们将 CSS 文件导入组件,则在卸载组件后,CSS 样式可能会被删除。