在 React 中为边框 CSS 属性设置样式
Style the border CSS property in React
在 React 中使用border
css 属性设置元素的边框样式,例如<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 样式可能会被删除。