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

作者

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

Style the border CSS property in React

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

应用程序.js
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 中设置元素的border CSS 属性的样式。

请注意，您必须将border属性的值包装在一个字符串中。

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

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

应用程序.js
<div style={{borderBottom: '2px dotted red'}}>Some content here</div>

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

或者，您可以将样式写入具有.css扩展名的文件中。

应用程序.css
.red-border {
  border: 1px solid red;
}

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

应用程序.js
// 👇️ 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 样式可能会被删除。

–

发表评论