如何修改Primereact(JS)中TabPanel(TabView)的内容背景色？

• 内联style直接设置
  直接在TabPanel组件上添加style属性，把背景色设为黑色，还可以顺便调整文字颜色（黑色背景下白色文字更易读）：

<TabPanel header="Tab 1" style={{ backgroundColor: '#000', color: '#fff' }}>
  {/* 这里放你的Tab内容 */}
</TabPanel>

• 自定义CSS类
  先写一个自定义CSS类：

.custom-tab-panel {
  background-color: #000 !important;
  color: #fff;
}

然后给TabPanel加上这个类名：

<TabPanel header="Tab 1" className="custom-tab-panel">
  {/* 这里放你的Tab内容 */}
</TabPanel>

如果默认样式优先级更高，就用更具体的选择器来覆盖：

.p-tabview .p-tabview-panel.custom-tab-panel {
  background-color: #000;
  color: #fff;
}

• 全局统一修改所有TabPanel
  要是想让项目里所有TabPanel都用黑色背景，直接覆盖PrimeReact的默认样式类就行：

.p-tabview .p-tabview-panel {
  background-color: #000;
  color: #fff;
}

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