10. 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 />

      <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 样式可能会被删除。