Flex props do not work for components

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Create React App

What browsers are you seeing the problem on?

Chrome

Please describe your bug.

If I put my TextField inside a Flex component and set the grow to 1, the property does not get set in the CSS. Same goes for other components like SelectField, etc.

What’s the expected behaviour?

According to the docs, grow, flex, and other flex properties should work for all UI React components.

Help us reproduce the bug!

1. Create jsx like so:

      <Flex direction={'row'} backgroundColor={'pink'}>
        <TextField label={'Label!'} grow={1}/>
      </Flex>

1. See that the TextField does not get stretched out.
2. See that the CSS is not applied

Code Snippet

No response

Additional information and screenshots

Actual:

Expected:

[hein-j]

@dbanksdesign @slaymance We were going to open another issue as a P1 on display=none not completely working on certain components. I’m guessing it’s addressed by this change, but just wanted to confirm. If not, I’ll open a separate issue:

[zchenwei]

@hein-j Yes, that will be addressed together along with the change