样式冲突修复组件

How_doyou_do2025-09-30 12:33

在我写一个页面的时候分页器样式被扰乱了，通过查看元素发现样式被覆盖了，是因为有协作者在开发其他页面的时候将一些样式加在了 body 样式里面了，这个标签选择器将我的组件内部的样式覆盖了

那么解决方法就是将和扰乱样式相关的样式从 app.scss 中提取出来，单独写一个组件去实现，然后针对特定的页面进行外套，从而不影响其他页面，这个过程可以先写一个单独组件，然后去路由守卫中进行分支套层

复制代码

import React from 'react';

interface MtdFixProps {
  children?: React.ReactNode;
  className?: string;
}

const MtdFix: React.FC<MtdFixProps> = ({ children, className }) => {
  return (
    <>
      <style>
        {`
          .mtd-prime-select,
          .mtd-prime-date-picker {
            width: 100% !important;
          }

          .form-card-box:nth-child(2) {
            margin-top: 4px !important;
          }
        `}
      </style>
      <div className={className} style={{ height: '100%', width: '100%' }}>
        {children}
      </div>
    </>
  );
};

export default MtdFix;

注意要 100% 确保子组件的空间占据

那么具体使用的时候就去外面套一层例如

复制代码

const Index = () => {
  return (
    <MtdFix>
      <HomeProvider>
        <CUIProvider chatType="main">
          <Main />
          {/* 用户引导 */}
          <HomePageUserGuide />
        </CUIProvider>
      </HomeProvider>
    </MtdFix>
  );
};