The following code looks for the comma in a string and replaces it with a line break.

render: (rowData) => (
    <>
        {rowData.Taxonomy.split(", ").map((b) => {
            return (
                <>
                    {b},
                    <br />
                </>
            );
        })}
    </>
),

The output into a material-table looks like this:

Domain: Corporate,
DomainLeader: John Doe,

How can I adapt this code to make Domain and DomainLeader bold?:

Domain: Corporate,
DomainLeader: John Doe,

CodePudding user response：

If you use material v5 you can: I assumed ":" is fixed char and the rest chars are dynamic

 <Box sx={{ flexDirection: 'column' }}>
    {rowData.Taxonomy.split(", ").map((b) => (
                <Box sx={{ flexDirection: 'row' }}>
                    <Box sx={{ fontWeight: 'bold' }}>
                        {b.split(':')[0]}:
                    </Box>
                    <Box>&nbsp;{b.split(':')[1]},</Box>
                </Box>    
            ))}
    </Box>