我正在尝试创建使用 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;
当您使用纯 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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句