react scrol 样式

2024年4月28日发(作者：)

react scrol 样式

在React中，可以使用CSS的样式来修改滚动条的样式。

1. 在组件的CSS文件中添加样式：

```css

/* 修改滚动条的样式 */

::-webkit-scrollbar {

width: 12px; /* 设置滚动条的宽度 */

}

::-webkit-scrollbar-track {

background-color: #f1f1f1; /* 设置滚动条的轨道背景色 */

}

::-webkit-scrollbar-thumb {

background-color: #888; /* 设置滚动条上的滑块颜色 */

border-radius: 6px; /* 设置滑块的圆角 */

}

::-webkit-scrollbar-thumb:hover {

background-color: #555; /* 设置鼠标悬停时的滑块颜色 */

}

```

2. 在组件的JSX中使用滚动条：

```jsx

import React from 'react';

const App = () => {

return (

)

}

export default App;

```

3. 添加滚动条容器的样式：

```css

/* 设置滚动条容器的样式 */

.scrollable-container {

width: 300px; /* 设置滚动条容器的宽度 */

height: 200px; /* 设置滚动条容器的高度 */

overflow-y: scroll; /* 设置垂直滚动条可见 */

}

```

这样就可以在React中使用自定义的滚动条样式了。如果需要

修改滚动条的样式，只需要调整CSS的样式即可。