I've been working on a Material-UI Table where I customized the headers and table styles.
While testing it locally with yarn start, it looked like this:
https://i.stack.imgur.com/7yU2H.png
However, when I viewed it on the remote system, it appeared like this:
https://i.stack.imgur.com/HgRns.png
The font-size and alignment seemed off between the two instances, even though they were in the same browser on the same system but different tabs.
Below are the specific code modifications that I implemented:
const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': {
backgroundColor: theme.palette.action.hover,
},
// hide last border
'&:last-child td, &:last-child th': {
border: 0,
},
}));
const StyledAvatar = styled(Avatar)`
box-shadow: 0px 1px 3px #777;
`;
const NoTableCellPadding = styled(TableCell)`
font-size: 0.75rem;
font-family: Roboto;
text-align: center;
&.MuiTableCell-head {
background: linear-gradient(#ddd, #fff 40%, #ddd);
border-right: 1px solid #ccc;
}
&.MuiTableCell-head:last-child th' {
border-right: none;
}
`;
Now, I'm puzzled as to why these style changes aren't reflecting correctly. Any suggestions on where to troubleshoot?