CODEWITHSUNDEEP
cssreactjsag-grid
nuhabo
nuhabo

Reputation: 23

How to Remove border style on React AgGrid .ag-root-wrapper

I can not remove border style.
The properties I want to remove are as follows.

border: solid 1px <<

And, I tried on css file.

.ag-root-wrapper {
    border: 0px solid transparent;
}

This code is not working.
However, if you remove the attribute through Chrome developer mode, you can remove the border.

ps. I wanted upload problem image.
But I can't. (You need at least 10 reputation to post images.)


Detail source added.

default.css

.ag-root-wrapper {
    border: none // not working
    // display: none // working!!
}

agGrid

import React from 'react';
import 'default.css';
import {AgGridColumn, AgGridReact} from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

export default function Example(props) {
    return (
        <div 
            className="ag-theme-alpine" 
            style={{height: "calc(100vh - 48px)", margin: "10px",
            width: "100%"}}>
            <AgGridReact
                defaultColDef={{
                    minWidth: 100,
                    resizable: true
                }}
                colResizeDefault={'shift'}
                rowSelection={'single'}
                onGridReady={onGridReady}
                onSelectionChanged={onSelectionChanged}
                rowData={data}>
                <AgGridColumn field="cateId" width={20}/>
                <AgGridColumn field="sort" width={30}/>
                <AgGridColumn field="isUsed" width={30}/>
                <AgGridColumn field="title" width={260}/>
                <AgGridColumn field="explanation" width={500}/>
                <AgGridColumn field="gitHubUrl" width={400}/>
                <AgGridColumn field="markdownUrl" width={700}/>
            </AgGridReact>
        </div>
    );
};

Upvotes: 2

Views: 2911

Answers (1)

Almigra
Almigra

Reputation: 90

It should work if you specify .ag-theme-alpine like this :

.ag-theme-alpine .ag-root-wrapper  {
    border: none;
}

Upvotes: 3

Related Questions