I came across a project where someone implemented components with custom CSS.
One interesting thing I noticed was a wrapper component, similar to Material UI's Container or just a simple div with applied styles.
export const Container = styled.div`
position: relative;
margin: 0 auto;
margin-top: ${p => p.marginTop ? p.theme.spacing[p.marginTop] : 0};
width: 100%;
max-width: ${p => (p.maxWidth && p.theme.screen[p.maxWidth])};
padding: ${p => p.padding ? `0 ${p.theme.spacing[p.padding]}` : `0 ${p.theme.spacing.sm}`};
z-index: ${p => p.zIndex && p.theme.zIndex[p.zIndex]};
background-color: ${p => p.color && p.theme.colors[p.color]};
border-radius: ${p => p.radius && p.theme.radius[p.radius]};
`;
However, I am having trouble understanding what p.marginTop, p.theme, and others mean.
Now, I would like to simplify this by converting it into a basic div wrapper with styles following the Material UI approach.
Something like this:
const useStyles = makeStyles((theme) => ({
container: {
position: 'relative',
margin: '0 auto',
// margin-top: ${p => p.marginTop ? p.theme.spacing[p.marginTop] : 0},
width: '100%',
// max-width: ${p => (p.maxWidth && p.theme.screen[p.maxWidth])},
// padding: ${p => p.padding ? `0 ${p.theme.spacing[p.padding]}` : `0 ${p.theme.spacing.sm}`},
padding: theme.spacing.sm,
// z-index: ${p => p.zIndex && p.theme.zIndex[p.zIndex]},
// background-color: ${p => p.color && p.theme.colors[p.color]},
// border-radius: ${p => p.radius && p.theme.radius[p.radius]},
}
}))
Unfortunately, all the commented lines are causing errors as they do not recognize 'p'.
(I managed to find a workaround for the p.theme related values by importing them from a theme.js file, but I'm still confused about p.padding and p.maxWidth)
Could someone please explain this to me?