Блог

Я использую библиотеку react-native-render-html для отображения данных из фреймворка Django Rest, хранящихся RichTextUploadingField django-ckeditor в. Поскольку базовый стиль работает правильно, у меня проблема с <ul> тегом — текст не центрирован по кругу/квадрату/числу, как показано на рисунке. Я пробовал использовать renderersProps , как:

 <RenderHTML renderersProps={{ ul: { markerBoxStyle:{ paddingRight: 3, top: 5 }, markerTextStyle: { color: "red" } } }} />
 

Но это работает для определенного размера текста. Если я изменю размер текста в стиле в Django admin, элемент и текст снова не будут центрированы. Есть ли какой-либо вариант, как это исправить или в чем причина проблемы?

Вы можете добавить пользовательский класс CSS только к неупорядоченным элементам списка. Затем примените свои стили к этому классу CSS.

 // this function goes through every list item in <ul> only and adds your custom class ('ul-li' in my case)
const onElement = (el) => {
  const { children, name } = el;
  if (name === 'ul' amp;amp; children amp;amp; children.length) {
      children.forEach(listItem => listItem.attribs = {class: 'ul-li'})
  }
}

// define your styles for your custom class
const classesStyles = {
  "ul-li": {
    lineHeight: '21px', // for me adjusting lineHeight did the job
  }
}

// in your JSX
<RenderHtml
  source={source}
  contentWidth={width}
  tagsStyles={tagsStyles}
  ... // other props you may have
  domVisitors={{onElement}} // first alter your html
  classesStyles={classesStyles} // then apply styles
/> 

Источники:
стили
классов один элемент