Styled-jss component not passing props down

[RickEyre]

Should this work?

import React from 'react';
import styled from 'styled-jss';
import styles from 'my-styles';

const Input = styled('input')(styles.input);

export const TextInput = () => (
  <Input type='text' />
);

[lttb]

Yes, of course. Could you provide a case where it does not work please?

[RickEyre]

Yes, of course. Could you provide a case where it does not work please?

Sure, what do you need other than what I provided above? I can expand the styles that I'm assigning.

// my-styles.js

export const input = {
  display: 'block',
  position: 'relative',
  zIndex: 100,
  borderRadius: 0
};

import React from 'react';
import styled from 'styled-jss';
import { input } from 'my-styles';

const Input = styled('input')(input);

export const TextInput = () => (
  <Input type='text' />
);

[RickEyre]

Sorry, this was terrible of me. I didn't explain what was not working very well.

The type property of 'text' is not being passed down the base HTML input that is being rendered on the browser.

[lttb]

Hm, it works for me, you can check an example here

What React version do you use? 15 or 16?

[RickEyre]

On react v15.4.2

Would you recommend 16 then?

[RickEyre]

Closing this issue as it seems the problem is not with styled jss. Thanks for the help!

[lttb]

Would you recommend 16 then?

We use is-react-prop to detect html-attributes like type for input, but it may not to work with 16 version, but it should with 15.

The main idea of that package is that we can detect attributes without whitelists via react-dom, and react-dom/lib/DOMProperty should be inited.

Maybe you have 2 instances in the bundle (for example, some packages use different version), that cause this problem?

Please let me know if something clears up.

[lttb]

And we are working on the next is-react-prop version, that should be independent of react and react-dom.

[RickEyre]

Okay, I've narrowed down the issue.

It doesn't assign the prop when importing the component into another node module.

I have one node package that defines these components and another one that is pulling them in as dependent for usage. It isn't working in that case.

I can post sample projects later demonstrating the problem... I'm just curious if you may have any suspicions about why this may be happening.

[RickEyre]

Maybe you have 2 instances in the bundle (for example, some packages use different version), that cause this problem?

Two instances of what, sorry? React?

[RickEyre]

Nevermind... this was caused by yarn link.