React 如何避免 css 覆盖其他组件？ [复制]

Posted 2023-03-28

【中文标题】React 如何避免 css 覆盖其他组件？ [复制]

【英文标题】：React how to avoid css overide other components? [duplicate]

【发布时间】：2021-09-28 21:34:15

【问题描述】：

我正在尝试创建使用 AG-Grid 表的 React 应用程序。以前我通过覆盖 css 自定义表格并删除了 ag 网格的边框。我使用此代码来执行此操作。

.ag-root-wrapper 
    border: solid 0px !important;
    border-color: var(--ag-border-color, white) !important;

但我注意到我仅用于一个组件的代码影响了整个应用程序。 我很好奇也许有办法只为特定组件在本地导入 css 吗？ 这就是我为组件导入 css 的方式

import './Statistics.css'
import  AgGridColumn, AgGridReact  from 'ag-grid-react';

const Statistics = () => 
    return (
    <div className='content'>
     <div className='content-left'>
      <div className="ag-theme-alpine">
        <AgGridReact
           rowData=data
            style=borderColor: 'red'
            rowSelection="single"
            filter=false
        >
         <AgGridColumn
          headerName="Date"
          field="date"
          resizable=true
          filter=false
          width=130
          flex=1
          sort='asc'
          cellStyle=fontSize: '1vw'
         />
       </AgGridReact>
      </div>
     </div> 
    </div>
     )

export default Content;

【问题讨论】：

只需将 ag-grid 包装在您创建的 React 组件中，创建仅包含与该组件相关的样式的样式表，然后将其导入该组件中。它们的样式将作用于组件，而不是整个应用程序。当这些样式仅适用于应用程序的一小部分时，您应该避免创建全局样式/样式表。

我已经这样做了，ag网格在单独的组件中使用，我导入的文件也仅用于一个组件，但它也会影响其他组件。

您能否分享更多代码，以便我们了解您的应用程序中使用的结构？请分享所有相关文件。

根据您的更新，您似乎正在正确使用和导入样式表。 ag-root-wrapper 的样式是否可能在 ag-grid 的 DOM 链中处于较高位置，并覆盖其他样式？

您可能需要找到一个范围比ag-root-wrapper 更低的组件。我也使用过 ag-grid，无论如何设计它都不容易。

【参考方案1】：

当您使用纯 css 或 css 预处理器（Sass、less..）时，导入的 css 将始终对您的应用程序是全局的。将每个组件限定在唯一的类名中非常有用，这样您就可以限定 css。

import './Statistics.css'
import  AgGridColumn, AgGridReact  from 'ag-grid-react';

const Statistics = () => 
    return (
+   <div className='root-statistics'>
    <div className='content'>
     <div className='content-left'>
      <div className="ag-theme-alpine">
        <AgGridReact
           rowData=data
            style=borderColor: 'red'
            rowSelection="single"
            filter=false
        >
         <AgGridColumn
          headerName="Date"
          field="date"
          resizable=true
          filter=false
          width=130
          flex=1
          sort='asc'
          cellStyle=fontSize: '1vw'
         />
       </AgGridReact>
      </div>
     </div> 
    </div>
+   </div>
     )

export default Content;

.root-statistics .ag-root-wrapper 
    border: solid 0px !important;
    border-color: var(--ag-border-color, white) !important;

【讨论】：

非常感谢您的回答对我的帮助。