將樣式應用到 antd 表列

Question

我有下表列配置，我在其中使用自定義函數渲染注釋

fieldDefs: (results, isJsonData) => [
{
  title: 'Notes',
  name: 'notesHTML',
  table: {
    render: SectionNotes,
    searchable: true,
    width: 200, 
    style: { maxHeight: 300, overflowY: 'auto'} // tried with this but not working this way
  }
}]

下面是 SectionNotes 方法

const SectionNotes = notes => {
  if (!notes) return '';
  /* eslint-disable react/no-danger */
  return notes.map((note, index) => (
    <div key={note} style={{ maxHeight: 300, overflowY: 'auto'}}>
      <span style={{ fontWeight: 'bold' }}>
        {index + 1}.{' '}
      </span>
      <span dangerouslySetInnerHTML={{ __html: sanitizer(note) }} />
    </div>
  ));
  /* eslint-enable react/no-danger */
};

在這里我正在做的是我將循環瀏覽筆記並將樣式style={{ maxHeight: 300, overflowY: 'auto'}}應用於每個筆記，如果它具有最小寬度，則滾動條應用。

它看起來像下圖

但我想對整個單元格數據應用相同的樣式，而不是在單元格內的每個音符上。

任何人都可以讓我知道我怎樣才能做到這一點？ 也為整個單元格或整個列應用樣式。

我正在使用Ant Design表來呈現數據。

Answer 1

我已經用下面的代碼修復了

export const SectionNotes = notes => {
  if (!notes) return '';
  /* eslint-disable react/no-danger */   

  return notes.map((note, index) => (
    <div key={note}>
      <span style={{ fontWeight: 'bold' }}>
        {index + 1}.{' '}   
      </span>   
      <span dangerouslySetInnerHTML={{ __html: sanitizer(note) }} />
    </div>      
  ));   
  /* eslint-enable react/no-danger */    
};


export const renderSectionNotes = text => {
  return <div style={{ maxHeight: 250, overflowY: 'auto' }}>{SectionNotes(text)}</div>;
};

然后我使用如下

fieldDefs: (results, isJsonData) => [
{
  title: 'Notes',
  name: 'notesHTML',
  table: {
    render: renderSectionNotes,
    searchable: true,
    width: 200
  }
}]