chore: remove useless any & add CSSProperties type (#43921)

.dumi/pages/index/components/Theme/index.tsx

@@ -336,7 +336,7 @@ export default function Theme() {
       ...ThemeDefault,
       themeType,
       ...ThemesInfo[themeType],
-    } as any;
+    };
 
     setThemeData(mergedData);
     form.setFieldsValue(mergedData);
@@ -517,13 +517,13 @@ export default function Theme() {
   const posStyle: React.CSSProperties = {
     position: 'absolute',
   };
-  const leftTopImageStyle = {
+  const leftTopImageStyle: React.CSSProperties = {
     left: '50%',
     transform: 'translate3d(-900px, 0, 0)',
     top: -100,
     height: 500,
   };
-  const rightBottomImageStyle = {
+  const rightBottomImageStyle: React.CSSProperties = {
     right: '50%',
     transform: 'translate3d(750px, 0, 0)',
     bottom: -100,

.dumi/theme/common/Color/ColorStyle.tsx

@@ -25,7 +25,7 @@ const ColorStyle = () => {
     if (index <= 10) {
       return `
 .palette-${color}-${index} {
-  background: ${(token as any)[`${color}-${index}`]};
+  background: ${token[`${color}-${index}`]};
 }
 ${makePalette(color, index + 1)}
     `;
@@ -37,7 +37,7 @@ ${makePalette(color, index + 1)}
     if (index <= 13) {
       return `
 .palette-gray-${index} {
-  background: ${(gray as any)[index]};
+  background: ${gray[index]};
 }
 ${makeGrayPalette(index + 1)}
     `;

components/_util/wave/WaveEffect.tsx

@@ -130,8 +130,8 @@ const showWaveEffect: ShowWaveEffect = (node, { className }) => {
   // Create holder
   const holder = document.createElement('div');
   holder.style.position = 'absolute';
-  holder.style.left = `0px`;
-  holder.style.top = `0px`;
+  holder.style.left = '0px';
+  holder.style.top = '0px';
   node?.insertBefore(holder, node?.firstChild);
 
   render(<WaveEffect target={node} className={className} />, holder);

components/calendar/demo/customize-header.tsx

@@ -15,7 +15,7 @@ const App: React.FC = () => {
     console.log(value.format('YYYY-MM-DD'), mode);
   };
 
-  const wrapperStyle = {
+  const wrapperStyle: React.CSSProperties = {
     width: 300,
     border: `1px solid ${token.colorBorderSecondary}`,
     borderRadius: token.borderRadiusLG,

components/collapse/demo/custom.tsx

@@ -34,7 +34,7 @@ const getItems: (panelStyle: CSSProperties) => CollapseProps['items'] = (panelSt
 const App: React.FC = () => {
   const { token } = theme.useToken();
 
-  const panelStyle = {
+  const panelStyle: React.CSSProperties = {
     marginBottom: 24,
     background: token.colorFillAlter,
     borderRadius: token.borderRadiusLG,

components/drawer/__tests__/Drawer.test.tsx

@@ -128,7 +128,7 @@ describe('Drawer', () => {
   });
 
   it('style/drawerStyle/headerStyle/bodyStyle should work', () => {
-    const style = {
+    const style: React.CSSProperties = {
       backgroundColor: '#08c',
     };
     const { container: wrapper } = render(

components/dropdown/demo/custom-dropdown.tsx

@@ -37,13 +37,13 @@ const items: MenuProps['items'] = [
 const App: React.FC = () => {
   const { token } = useToken();
 
-  const contentStyle = {
+  const contentStyle: React.CSSProperties = {
     backgroundColor: token.colorBgElevated,
     borderRadius: token.borderRadiusLG,
     boxShadow: token.boxShadowSecondary,
   };
 
-  const menuStyle = {
+  const menuStyle: React.CSSProperties = {
     boxShadow: 'none',
   };
 

components/form/demo/advanced-search.tsx

@@ -9,7 +9,7 @@ const AdvancedSearchForm = () => {
   const [form] = Form.useForm();
   const [expand, setExpand] = useState(false);
 
-  const formStyle = {
+  const formStyle: React.CSSProperties = {
     maxWidth: 'none',
     background: token.colorFillAlter,
     borderRadius: token.borderRadiusLG,

components/input/demo/align.tsx

@@ -18,7 +18,7 @@ const { Text } = Typography;
 const { Option } = Select;
 const { RangePicker } = DatePicker;
 
-const narrowStyle = {
+const narrowStyle: React.CSSProperties = {
   width: 50,
 };
 

components/table/InternalTable.tsx

@@ -196,7 +196,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
   const { childrenColumnName = 'children' } = mergedExpandable;
 
   const expandType = React.useMemo<ExpandType>(() => {
-    if (rawData.some((item) => (item as any)?.[childrenColumnName])) {
+    if (rawData.some((item) => item?.[childrenColumnName])) {
       return 'nest';
     }
 

components/tag/demo/animation.tsx

@@ -60,7 +60,7 @@ const App: React.FC = () => {
 
   const tagChild = tags.map(forMap);
 
-  const tagPlusStyle = {
+  const tagPlusStyle: React.CSSProperties = {
     background: token.colorBgContainer,
     borderStyle: 'dashed',
   };

components/transfer/__tests__/index.test.tsx

@@ -453,16 +453,16 @@ describe('Transfer', () => {
   });
 
   it('should add custom styles when their props are provided', () => {
-    const style = {
+    const style: React.CSSProperties = {
       backgroundColor: 'red',
     };
-    const leftStyle = {
+    const leftStyle: React.CSSProperties = {
       backgroundColor: 'blue',
     };
-    const rightStyle = {
+    const rightStyle: React.CSSProperties = {
       backgroundColor: 'red',
     };
-    const operationStyle = {
+    const operationStyle: React.CSSProperties = {
       backgroundColor: 'yellow',
     };
 

components/typography/__tests__/index.test.tsx

@@ -251,7 +251,7 @@ describe('Typography', () => {
           const onChange = jest.fn();
 
           const className = 'test';
-          const style = { padding: 'unset' };
+          const style: React.CSSProperties = { padding: 'unset' };
 
           const { container: wrapper } = render(
             <Paragraph