如何在 React 中设置 z-index 属性

作者

在 React 中设置 z-index 属性

How to set the z-index attribute in React

要在 React 中的元素上设置 z-index 属性，请在元素上设置styleprop 并使用该zIndex属性，例如style={{zIndex: '3'}}. z-index CSS 属性影响 HTML 元素相互堆叠的方式。

应用程序.js
const App = () => {
  return (
    <div>
      <div
        style={{
          position: 'relative',
          zIndex: '3',
          backgroundColor: 'salmon',
          padding: '2rem',
        }}
      >
        Hello world
      </div>
    </div>
  );
};

export default App;

我们
通过使用元素样式对象中的属性来设置元素的z-index 。zIndex

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

style请注意，在元素上设置 prop 时，我们使用了 2 组大括号。

内联样式中的第一组花括号标记表达式的开始，第二组花括号是包含样式和值的对象。

如果你不想使用 camelCase CSS 属性，你可以在 CSS 文件中编写你的样式。

应用程序.css
.z-50 {
  z-index: 50;
  position: relative;
}

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

应用程序.js
import './App.css';

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

export default App;
在 React 中导入全局 CSS 文件时，最佳做法是将 CSS 文件导入到您的index.js文件中。

该index.js文件是您的 React 应用程序的入口点，因此它始终会运行。

另一方面，如果您将 CSS 文件导入到组件中，则一旦您的组件卸载，CSS 样式可能会被删除。

–

发表评论