React does not recognize the `__scTheme`

[jacekschae]

💬 Questions and Help

I'm using smooth ui modal and get following error in the console whenever i open a modal in my app

React does not recognize the `__scTheme` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `__sctheme` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

What am I doing wrong 🤔?

[gregberge]

Hello @jacekschae, I think you are doing something wrong, this property is in the theme and should not be part of a component. I think you are spreading the theme somewhere.

[jacekschae]

Hello @neoziro

I'm not sure if it's me 🤔

I used create react app and added smooth-ui (repo: https://github.com/jacekschae/smooth-ui-modal) after opening the modal I have following error in the console:

Warning: React does not recognize the `__scTheme` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `__sctheme` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Transition)
    in div (created by FocusLock)
    in FocusLock (created by Transition)
    in Portal (created by Transition)
    in Transition (created by ModalComponent)
    in ModalComponent (created by Context.Consumer)
    in sui-modal (created by sui-modal)
    in sui-modal (created by Context.Consumer)
    in StyledComponent (created by Styled(sui-modal))
    in Styled(sui-modal) (at Modal.js:19)
    in div (at Modal.js:15)
    in MyModal (at Modal.js:51)
    in Unknown (at App.js:14)
    in header (at App.js:11)
    in div (at App.js:10)
    in App (at src/index.js:7)

I think this has to do with v8, I didn't have this error before.

Hope that helps

[jacekschae]

This is independent of adding <ThemeProvider theme={theme}> or not

[gregberge]

My bad, there was an error. I fixed it, I will publish a new release soon. Thanks for reporting!

[jacekschae]

Glad to help

[ividic]

Hey @neoziro, I'm also seeing this issue in the following scenario:

import { Link } from 'react-router-dom';
import { Button } from '@smooth-ui/core-sc';

const StyledLink = styled(Link)`
  min-width: auto;

  &:hover {
    text-decoration: none;
  }
`;

<Button as={StyledLink} to="/profile">
  Profile
</Button>

The issue seems to be when using the as prop, as the following code does not trigger the error:

<StyledLink to="/">
  Test
</StyledLink>

CodeSandbox demo

[jacekschae]

Hi @ividic
as has changed in v8 to uiAs after doing this small change the console in the code sandbox is clear

[ividic]

Thanks @jacekschae, I missed that change - fixed now.

[gregberge]

Yeah, I am actually working on removing "uiAs" and also removing this weird theme prop.

[jacekschae]

Does this mean it will be back to as? If yes, when will it be available?

[gregberge]

Yes, by the end of the week I think.