Предупреждение: React не распознает пропозицию `textAlign` для элемента DOM - PullRequest
Новая
       11

Предупреждение: React не распознает пропозицию `textAlign` для элемента DOM

0 голосов
/ 05 декабря 2018

... Если вы намеренно хотите, чтобы он отображался в DOM в качестве настраиваемого атрибута, вместо этого пишите его строчными буквами textalign.Если вы случайно передали его из родительского компонента, удалите его из элемента DOM.

Я получаю это предупреждение при попытке использовать styled-system в сочетании с material-ui.

Код: 

const textAlign = style({
  // React prop name
  prop: "textAlign",
  // The corresponding CSS property (defaults to prop argument)
  cssProperty: "textAlign",
  // key for theme values
  key: "textAlign",
  // accessor function for transforming the value
  transformValue: (n: string) => {
    return `${n} !important;`
  }
  // add a fallback scale object or array, if theme is not present
})

export const UiTableCell = uiTableCell`
   ${fontSize};
   ${textAlign};
   border-bottom: none !important;
   padding-top: 8px !important;
   padding-right: 20px !important; 
   padding-left: 20px !important; 
   padding-bottom: 8px !important;
   white-space: nowrap;
   position: relative;
   color: ${(props) => (props.color ? props.color : theme.colors.text)} !important;
`

и его использование в компоненте: 

<UiTableCell textAlign="right" fontSize={[2]}>
  <Text ml={[4]}>{stuff}</Text>
</UiTableCell>

Это не мешает работе приложения, но предупреждение загрязняет консоль отладки ...

1 Ответ

0 голосов
/ 10 декабря 2018

Кажется, что компонент UiTableCell передает все свойства, которые он не распознает.Пока он отображает тег «td», это приводит к DOM-узлу, например: 

<td textAlign="right"></td>

, где «textAlign» не анализируется как действительный атрибут HTML.

Вместо того, чтобы стилизовать UiTableCell напрямую, выследует создать компонент-оболочку со всеми необходимыми пользовательскими стилями (передаваемыми как реквизиты) и поместить в него содержимое UiTableCell.

Проверьте полную демонстрацию на основе вашего примера здесь: https://codesandbox.io/s/n91k87r26p

...