cellClassName doesn't work for child components

[iamblackornot]

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
    priceCell: { fontWeight: 'bold' },
});

const PriceField = props => {
    const classes = useStyles();
    return <TextField cellClassName={classes.priceCell} {...props} />;
};

export const ProductList = (props) => (
    <List {...props}>
        <Datagrid>
            <PriceField source="price" />
        </Datagrid>
    </List>
);

// renders in the Datagrid as
<td class="[class name generated by JSS]"><span>2</span></td>

i can't make the example above to work. PriceField doesn't apply cellClassName style to the DataGrid cell. It will work if I use

        <Datagrid>
            <TextField cellClassName={classes.priceCell} source="price" />
        </Datagrid>

(actually fontWeight: 'bold' doesn't work too, i used color: 'red')
since i want to dynamically change cell appearance based on its content, i desperatelly look for a tip.

[WiXSL]

Changing
<TextField cellClassName={classes.priceCell} {...props} /> for
<TextField className={classes.priceCell} {...props} />
should work.

But you are right cellClassName doesn't get applied.

[iamblackornot]

thx for reply. className works but the result is different. Documentation (Field Components -> Styling Fields) clearly states that the first code fragment from the op post will work and change the cell appearance. So i try to figure out whether im wrong or the mentioned documentation part is irrelevant due to some other reasons.

[WiXSL]

I don't think you are wrong. It looks like a bug to me

[WiXSL]

I wouldn't close it. Leave it open in order for the people at marmelab have a chance to look at it.

[iamblackornot]

sorry, misunderstood the meaning of issue closing

[fzaninotto]

DatagridCell inspects its children (the Field components) for a cellClassName prop, and adds that class to the cell. If the immediate child doesn't have a cellClassName, then this does not work. I really don't see how to implement what you're describing.

So let's say that we won't fix it, and for your use case you must use a custom body in your Datagrid, as explained in the doc:

https://marmelab.com/react-admin/List.html#body-element

I'll just add a warning to the doc about that special case.