... If you deliberately want it to be displayed in the DOM as a custom attribute, spell it as lowercase
textalign. If it was mistakenly transferred from a parent component, remove it from the DOM element.
Encountering this alert message while attempting to utilize styled-system with material-ui.
The snippet:
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;
`
and its application in a component:
<UiTableCell textAlign="right" fontSize={[2]}>
<Text ml={[4]}>{stuff}</Text>
</UiTableCell>
Although it doesn't hinder the functionality of the app, the warning messages are cluttering the debugging console...