[system] 'display: flex' not working with compose
See original GitHub issueI cannot get flexbox to work with compose from material-ui’s system portion of the library. I even tried editing the demo made with the codesandbox to no avail.
I am not sure what I am doing wrong. justifyContent
works, its just the display:flex
. If I add flexbox via a class name, it acts as it should which means it is not how the component is being set up.
This is my code for a quick reference and in case my changes to the sandbox had not been retained. The sandbox I edited is here.
import React from "react";
import { styled } from "@material-ui/core/styles";
import { compose, flexbox, spacing, palette } from "@material-ui/system";
const Box = styled("div")(
compose(
flexbox,
spacing,
palette
)
);
export default function JSS() {
return (
<Box
display="flex"
justifyContent="center"
color="white"
bgcolor="palevioletred"
p={1}
>
JSS
</Box>
);
}
Thank you in advance
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
[system] 'display: flex' not working with compose · Issue #19160
I cannot get flexbox to work with compose from material-ui's system portion of the library. I even tried editing the demo made with...
Read more >Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
If the flex-direction is row and I am working in English, then the start edge of the main axis will be on the...
Read more >Flexbox Layout Behavior in Jetpack Compose
Flex direction specifies whether items are arranged vertically or horizontally. Compose has Row and Column composables that work for simple ...
Read more >CSS flex-basis not working when flex-direction is 'column'
Try to set flex: none for blocks inside the container in the condition when you change the orientation ( ...
Read more >Compose layout basics - Android Developers
This document focuses on the layout of elements, explaining some of the building blocks Compose provides to help you lay out your UI...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks for the feedback!
Yes in the link I included
After looking through the docs I noticed that there was a
display
portion of system. There is no mention of that being needed in the flexbox portion of the the documentation.I suggest adding that to avoid confusion as it appears that only { flexbox } needs to be imported from ‘material-ui/system’ when in reality it should be
import {display, flexbox} from 'material-ui/system'