[Bug] 切换不同的主题,表格图标不跟随切换的主题变化。
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 486
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 16
Description
Version
1.22.3
Link to Minimal Reproduction
官网demo
// import * as ReactVTable from '@visactor/react-vtable';
const { useCallback, useRef, useState } = React;
const { ListTable } = ReactVTable;
function App() {
const tableInstance = useRef(null);
const [bol, setBol] = useState(false);
const option = {
columns: [
{
field: '类别',
tree: true,
title: '类别',
width: 'auto',
sort: true
},
{
field: '销售额',
title: '销售额',
width: 'auto',
sort: true
// tree: true,
},
{
field: '利润',
title: '利润',
width: 'auto',
sort: true
}
],
//theme: VTable.themes.BRIGHT,
records: [
{
类别: '办公用品',
销售额: '129.696',
数量: '2',
利润: '-60.704',
children: [
{
类别: '信封', // 对应原子类别
销售额: '125.44',
数量: '2',
利润: '42.56',
children: [
{
类别: '黄色信封',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '白色信封',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
},
{
类别: '器具', // 对应原子类别
销售额: '1375.92',
数量: '3',
利润: '550.2',
children: [
{
类别: '订书机',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '计算器',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
}
]
},
{
类别: '技术',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: [
{
类别: '设备', // 对应原子类别
销售额: '225.44',
数量: '5',
利润: '462.56'
},
{
类别: '配件', // 对应原子类别
销售额: '375.92',
数量: '8',
利润: '550.2'
},
{
类别: '复印机', // 对应原子类别
销售额: '425.44',
数量: '7',
利润: '342.56'
},
{
类别: '电话', // 对应原子类别
销售额: '175.92',
数量: '6',
利润: '750.2'
}
]
},
{
类别: '家具',
销售额: '129.696',
数量: '2',
利润: '-60.704',
children: [
{
类别: '桌子', // 对应原子类别
销售额: '125.44',
数量: '2',
利润: '42.56',
children: [
{
类别: '黄色桌子',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '白色桌子',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
},
{
类别: '椅子', // 对应原子类别
销售额: '1375.92',
数量: '3',
利润: '550.2',
children: [
{
类别: '老板椅',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '沙发椅',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
}
]
},
{
类别: '生活家电(懒加载)',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
}
]
};
const btn = ()=> {
setBol(pre=> !pre)
}
const ready = (instance, isInitial) => {
if (isInitial) {
tableInstance.current = instance;
}
};
return (
<>
themes
<ListTable
columns={option.columns}
records={option.records}
theme={bol? VTable.themes.DARK: VTable.themes.ARCO}
>
</>
);
}
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render();
// release react instance, do not copy
window.customRelease = () => {
root.unmount();
};
Steps to Reproduce
1.切换不同的主题,图标不随着图标变化;
2.theme: VTable.themes.DARK/VTable.themes.ARCO;
3.如果默认ARCO主题,点击按钮,切换成DARK主题,背景色变化了,但是图标还是ARCO主题的颜色,并不是DARK主题的颜色。
Current Behavior
// import * as ReactVTable from '@visactor/react-vtable';
const { useCallback, useRef, useState } = React;
const { ListTable } = ReactVTable;
function App() {
const tableInstance = useRef(null);
const [bol, setBol] = useState(false);
const option = {
columns: [
{
field: '类别',
tree: true,
title: '类别',
width: 'auto',
sort: true
},
{
field: '销售额',
title: '销售额',
width: 'auto',
sort: true
// tree: true,
},
{
field: '利润',
title: '利润',
width: 'auto',
sort: true
}
],
//theme: VTable.themes.BRIGHT,
records: [
{
类别: '办公用品',
销售额: '129.696',
数量: '2',
利润: '-60.704',
children: [
{
类别: '信封', // 对应原子类别
销售额: '125.44',
数量: '2',
利润: '42.56',
children: [
{
类别: '黄色信封',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '白色信封',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
},
{
类别: '器具', // 对应原子类别
销售额: '1375.92',
数量: '3',
利润: '550.2',
children: [
{
类别: '订书机',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '计算器',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
}
]
},
{
类别: '技术',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: [
{
类别: '设备', // 对应原子类别
销售额: '225.44',
数量: '5',
利润: '462.56'
},
{
类别: '配件', // 对应原子类别
销售额: '375.92',
数量: '8',
利润: '550.2'
},
{
类别: '复印机', // 对应原子类别
销售额: '425.44',
数量: '7',
利润: '342.56'
},
{
类别: '电话', // 对应原子类别
销售额: '175.92',
数量: '6',
利润: '750.2'
}
]
},
{
类别: '家具',
销售额: '129.696',
数量: '2',
利润: '-60.704',
children: [
{
类别: '桌子', // 对应原子类别
销售额: '125.44',
数量: '2',
利润: '42.56',
children: [
{
类别: '黄色桌子',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '白色桌子',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
},
{
类别: '椅子', // 对应原子类别
销售额: '1375.92',
数量: '3',
利润: '550.2',
children: [
{
类别: '老板椅',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '沙发椅',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
}
]
},
{
类别: '生活家电(懒加载)',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
}
]
};
const btn = ()=> {
setBol(pre=> !pre)
}
const ready = (instance, isInitial) => {
if (isInitial) {
tableInstance.current = instance;
}
};
return (
themes
<ListTable
columns={option.columns}
records={option.records}
theme={bol? VTable.themes.DARK: VTable.themes.ARCO}
>
);
}
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render();
// release react instance, do not copy
window.customRelease = () => {
root.unmount();
};
Expected Behavior
期望主题切换的表格,图标也能适配不同的主题,而不是没有变化。
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the React ListTable usage in the reproduction and trace how the theme prop changes from VTable.themes.ARCO to VTable.themes.DARK. Reproduce the switch in the official demo and inspect the theme and icon rendering entry points. Done means table icons update their colors when the theme changes, while the existing table behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100