I'm using react-table library. Normally we have default text-overflow: ellipsis CSS rule when text length is bigger than input its adding three dots at the end of the cell.

But when I use custom Cell renderer of that library; for some reason its enabling only text-overflow: ellipsis rule and texts overflowing to the left and right. Playing with CSS to add this rule everywhere didn't work even in devtools, interestingly. Does anyone has an idea?

{
    Header: translateAndParseEventField('evaluation', t),
    id: 'evaluation',
    accessor: d => d.evaluation,
    Cell: (cell: CellInfo) => (

      <div data-no-context>
        <span className={classes.evaluationToggle}>
          {cell.value}
        </span>
      </div>
    ),
    width: 150,
    style: {
        padding: '13px',
        textAlign: 'center',
    },
},