如何在React.js中仅用JS对象形式的内联CSS修改垂直滚动条宽度？

React的内联style属性仅支持直接作用于元素本身的CSS属性，不支持伪元素（如::-webkit-scrollbar）和嵌套选择器。你写的&::-webkit-scrollbar这类语法是CSS-in-JS库（比如styled-components、Emotion）的专属特性，原生内联样式无法识别，所以滚动条样式不生效。

如果坚持要用JS对象的方式管理样式，推荐使用CSS-in-JS库；如果不想引入额外依赖，用CSS模块也能解决问题，以下是两种具体实现：

方法1：使用styled-components #

先安装依赖：

npm install styled-components

修改组件代码：

import styled from 'styled-components';
import List from '@mui/material/List'; // 假设你使用的是MUI组件库的List

const StyledList = styled(List)`
  display: flex;
  flex-direction: column;
  height: 8vh;
  overflow-y: scroll;

  /* WebKit内核浏览器滚动条样式 */
  &::-webkit-scrollbar {
    width: 1px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #888;
  }

  /* Firefox浏览器滚动条样式，保证兼容性 */
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
`;

export default function ButtonsContainer() {
  return (
    <StyledList>
      {["btn1", "btn2", "btn3", "btn4"].map((txt) => (
        <ListItem key={txt}>
          <Button>{txt}</Button>
        </ListItem>
      ))}
    </StyledList>
  );
}

方法2：使用CSS模块（无额外依赖） #

1. 在组件目录下创建ButtonsContainer.module.css文件：

.styledList {
  display: flex;
  flex-direction: column;
  height: 8vh;
  overflow-y: scroll;
}

.styledList::-webkit-scrollbar {
  width: 1px;
}

.styledList::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* Firefox兼容样式 */
.styledList {
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}

2. 在组件中引入并使用：

import styles from './ButtonsContainer.module.css';
import List from '@mui/material/List';

export default function ButtonsContainer() {
  return (
    <List className={styles.styledList}>
      {["btn1", "btn2", "btn3", "btn4"].map((txt) => (
        <ListItem key={txt}>
          <Button>{txt}</Button>
        </ListItem>
      ))}
    </List>
  );
}

原生内联style无法实现伪元素样式是React的固有限制——内联样式本质是设置元素的styleDOM属性，而伪元素不属于元素本身的DOM属性范畴，因此无法通过这种方式控制。

内容的提问来源于stack exchange，提问作者anirudh bisht anirudh bisht