title: Warning: React does not recognize the `textAlign` prop on a DOM element
body: <blockquote>
    <p>...  If you intentionally want it to appear in the DOM as a custom
    attribute, spell it as lowercase <code>textalign</code> instead. If you
    accidentally passed it from a parent component, remove it from the DOM
    element.</p>
  </blockquote>
  
  <p>I am getting this warning when trying to use <code>styled-system</code> in combination with <code>material-ui</code>.</p>
  
  <p>The code:</p>
  
  <pre><code>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) =&gt; {
      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) =&gt; (props.color ? props.color : theme.colors.text)} !important;
  `
  </code></pre>
  
  <p>and its usage in a component:</p>
  
  <pre><code>&lt;UiTableCell textAlign="right" fontSize={[2]}&gt;
    &lt;Text ml={[4]}&gt;{stuff}&lt;/Text&gt;
  &lt;/UiTableCell&gt;
  </code></pre>
  
  <p>It does not keep the app from working but the warning is polluting the debugging console...</p>