full control over elements for styling

[butachan]

Hi I have several date columns and I enabl filter range on them. I really don't like the big spacing , the large width , the font-size of the default date filter so I want to style them myself.
But I cannot manage to do that:

for example with the following code :
` const columns = useMemo<MRT_ColumnDef[] >(
() => [
{.......

...... {
accessorFn:(row)=> new Date(row.dateReception),sortingFn: 'datetime', header: 'date de réception',
Cell: ({ cell }) => cell.getValue()?.toLocaleDateString('fr-FR'),type:'date', size: 140,filterVariant:'range',
muiTableHeadCellFilterTextFieldProps: {type: 'date', sx:{width:'50px', background:'red', fontSize:'3px' },},
},
`
the font-size doesn't just apply because the element I want to target is the child of this muiTableHeadCellFilterTextFieldProps sx props.

and I cannot get the space between the 2 dates to shrink because the element I want to target is the parent of this muiTableHeadCellFilterTextFieldProps sx props.

so please give me a way to apply my own css on the elements I want

[KevinVandy]

That's why I have given classNames to just about all inner elements. You can use emotion syntax to target child elements. Just need to inspect element to see the classNames.

[butachan]

The default classname of the elements I want to style look like : MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input . I don't think it's relevant to use them as selector since they may change.
Also, using another library that is independant to MRT won't solve my problem.

I notice that some column options may have a class : https://mui.com/material-ui/api/table-cell/#props but I cannot find any example using it and I don't even know if that would give the full control.

For example , in
muiTableHeadCellFilterTextFieldProps: {type: 'date', sx:{width:'50px', fontSize:'3px' },classes: }, what am I supposed to put as classes value ?

[butachan]

I tried as you suggest and the css looks like this :

.css-smkl36-MuiCollapse-wrapper {
    justify-content: center;
}
.MuiTableCell-root.MuiTableCell-body.MuiTableCell-alignCenter.MuiTableCell-sizeMedium{
    white-space: inherit;
}
.MuiTable-root.css-7dw5nj-MuiTable-root{
    margin-left:3px;
    border-radius: 10px;
}
.MuiTable-root.css-7dw5nj-MuiTable-root tbody tr:nth-child(even) {
    background:#edf3f7;
}

Apart from the code looking horrible, it doesn't work on build :
as I said the classNames change. For example, the thead classname is .MuiTableHead-root.css-120bgvu-MuiTableHead-root tr on dev but MuiTableHead-root css-1w3ooo8 on prod .

[KevinVandy]

No, don't use the generated emotion classNames with hashes in them. Those will change. Only use the Mui-* ones