Theme-ui: Flex component props not working as expected

[davegariepy]

Describe the bug
Flex component does not accept flexDirection prop

To Reproduce

/** @jsx jsx */
import { jsx } from "theme-ui";
import React from "react";
import { Flex } from "@theme-ui/components";

export default () => {
  return (
    <Flex flexDirection="column">
      <Box p={3} width={1 / 2} color="white" bg="primary">
        Flex
      </Box>
      <Box p={3} width={1 / 2} color="white" bg="secondary">
        Box
      </Box>
    </Flex>
  );
};

Expected behavior
children of Flex component should be displayed in column format when flexDirection="column" is added to component.

Screenshots
n/a

Additional context
this works when using long form in the sx prop, expect to be able to use the props directly on Flex

[jxnblk]

There is no flexDirection prop. If you've seen this in the docs somewhere, could you please point it out?

[joernroeder]

does that mean the you cant use <Flex> flexbox props as in https://rebassjs.org/reflexbox ?

Each Theme UI component includes shorthand props for applying margin, padding, and color styles.

so only margin, padding, and color right?

[lachlanjc]

Reflexbox + Rebass are totally different libraries than Theme UI (Components)—though Reflexbox used direct props for styling such as flexDirection, it’s now done via the sx prop: <Flex sx={{ flexDirection: ‘column’ }}>…, etc.

I think this can be closed? The expected behavior listed is not what Theme UI describes in its docs.

[joernroeder]

@lachlanjc yes, this can be closed. I was expecting the same behaviour because both are referencing styled-system at some point. thanks for clarifying!

[denu5]

I was also looking for the rebass width props....
So i think you need to just write the width in percent then?

    <Flex
      sx={{
        justifyContent: "center",
      }}
    >
      <Box p={2} bg="primary" sx={{ width: ["30%"] }}>
        Flex
      </Box>
      <Box p={2} bg="muted" sx={{ width: ["30%"] }}>
        Box
      </Box>
    </Flex>

[lachlanjc]

@denu5 Yeah, that works. You’ll want to move the p={2} & bg=“primary” to be keys in your sx prop though—Theme UI doesn’t support using styling keys directly as props.

[denu5]

@lachlanjc i think it does? https://theme-ui.com/components/box

[gzamann]

Why does Theme-UI not support the props as Rebass do? just want to know what is the difference