React如何避免css覆盖其他组件？

Question

我正在尝试创建使用 AG-Grid table 的 React 应用程序。之前我自定义了 table 并通过覆盖 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;

Answer 1

当您使用纯 css 或 css 预处理器（Sass，较少..）时，导入的 css 将 always 对您的应用程序来说是全球性的。将每个组件限定在一个唯一的类名中非常有用，这样您就可以限定 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;
}

React如何避免css覆盖其他组件？

React how to avoid css overide other components?

css

jsx

reactjs

ag-grid

ag-grid-react