如何在 React 中设置 CSS box-shadow

作者

在 React 中设置 CSS box-shadow

How to set a CSS box-shadow in React

在 React 中设置盒子阴影：

  1. style在元素上设置道具。
  2. 设置该boxShadow属性以在元素的框架周围添加阴影效果。
应用程序.js
const App = () => {
  const divStyles = {
    boxShadow: '1px 2px 9px #F4AAB9',
    margin: '4em',
    padding: '1em',
  };

  return (
    <div>
      <div style={divStyles}>Hello world</div>
    </div>
  );
};

export default App;

反应框阴影

我们使用对象的boxShadow属性在style元素的框架周围添加阴影效果。

您还可以内联添加框阴影样式。

应用程序.js
const App = () => {
  return (
    <div>
      <div
        style={{
          boxShadow: '1px 2px 9px #F4AAB9',
          margin: '4em',
          padding: '1em',
        }}
      >
        Hello world
      </div>
    </div>
  );
};

export default App;

请注意，在对象上访问时，多词属性如box-shadow驼峰式。style

该style属性的值包含在 2 组花括号中。

应用程序.js
<div
  style={{
    boxShadow: '1px 2px 9px #F4AAB9',
    margin: '4em',
    padding: '1em',
  }}
>
  Hello world
</div>
内联样式中的第一组花括号标记表达式的开始，第二组花括号是包含样式和值的对象。

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

应用程序.css
.box-shadow-md {
  box-shadow: 1px 2px 9px #f4aab9;
  margin: 4em;
  padding: 1em;
}

下面是我们将如何导入和使用box-shadow-md该类。

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

const App = () => {
  return (
    <div>
      <div className="box-shadow-md">Hello world</div>
    </div>
  );
};

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

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

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

–

发表评论