迹忆客 专注技术分享

在 React 中设置 box-shadow：

1. 在元素上设置样式属性。
2. 设置 boxShadow 属性以在元素的框架周围添加阴影效果。

const App = () => {
  const divStyles = {
    boxShadow: '1px 2px 9px #F4AAB9',
    margin: '4em',
    padding: '1em',
  };

  return (
    <div>
      <div style={divStyles}>Hello 迹忆客</div>
    </div>
  );
};

export default App;

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

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

const App = () => {
  return (
    <div>
      <div
        style={\{
          boxShadow: '1px 2px 9px #F4AAB9',
          margin: '4em',
          padding: '1em',
        \}}
      >
        Hello 迹忆客
      </div>
    </div>
  );
};

export default App;

请注意，在样式对象上访问时，像 box-shadow 这样的多字属性是驼峰式的。

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

<div
  style={{
    boxShadow: '1px 2px 9px #F4AAB9',
    margin: '4em',
    padding: '1em',
  }}
>
  Hello 迹忆客
</div>

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

或者，我们可以将样式写入扩展名为 .css 的文件中。

.box-shadow-md {
  box-shadow: 1px 2px 9px #f4aab9;
  margin: 4em;
  padding: 1em;
}

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

import './App.css';

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

export default App;

在 React 中导入全局 CSS 文件时，最好将 CSS 文件导入 index.js 文件。

index.js 文件是你的 React 应用程序的入口点，所以它总是会被运行。

另一方面，如果我们将 CSS 文件导入组件，则在卸载组件后，CSS 样式可能会被删除。