如何修改DexoExchange中基于pancake-uikit的React TS组件样式？

一、优先通过主题变量全局修改 #

pancake-uikit的所有组件样式都基于内置主题变量，直接重写主题是最高效的方式：

• 找到项目的主题配置文件（一般是src/theme/index.ts），基于官方主题扩展自定义变量：

  import { lightTheme } from '@pancakeswap/uikit'
  
  // 覆盖主题中的颜色、字体等变量
  const customTheme = {
    ...lightTheme,
    colors: {
      ...lightTheme.colors,
      // 修改头部/页脚背景色
      background: '#你的自定义颜色',
      footerBg: '#你的页脚自定义色',
      // 按需添加其他颜色变量
    },
    // 还能修改字体大小、间距等全局样式
  }
  
  export default customTheme
  

• 在App根组件用ThemeProvider传入自定义主题：

  import { ThemeProvider } from 'styled-components'
  import customTheme from './theme'
  
  function App() {
    return (
      <ThemeProvider theme={customTheme}>
        {/* 应用内容 */}
      </ThemeProvider>
    )
  }
  

二、强制覆盖单个组件样式 #

如果主题变量无法覆盖特定组件样式，用styled-components的样式优先级强制重写：

• 包裹原组件并自定义样式：

  import styled from 'styled-components'
  import { Header, Footer } from '@pancakeswap/uikit'
  
  const CustomHeader = styled(Header)`
    background-color: #你的自定义色;
    /* 其他需要修改的样式，比如字体、内边距 */
  `
  
  const CustomFooter = styled(Footer)`
    background-color: #你的页脚自定义色;
  `
  
  // 使用时替换原组件
  function Layout() {
    return (
      <>
        <CustomHeader />
        {/* 页面内容 */}
        <CustomFooter />
      </>
    )
  }
  

• 尽量不用!important，只有当主题样式优先级极高时再考虑使用。

三、找pancake-uikit主题变量的实用技巧 #

官方文档不全的情况下，用这两个方法找可用变量：

• 查看node_modules/@pancakeswap/uikit/dist/theme下的源码文件，里面列出了所有默认主题变量
• 用浏览器开发者工具 inspect 目标组件，查看CSS中使用的var(--xxx)变量，对应到主题中的属性

四、TypeScript适配小提示 #

• 鼠标悬停在lightTheme上，TypeScript会自动提示所有可用的主题属性和类型，避免写错变量名
• 自定义主题时保持和原主题结构一致，防止类型报错

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