search

segmentio / ui-box

Blazing Fast React UI Primitive
MIT License
1.07k stars 55 forks source link

Can't override styles of underlying component set with `is=` #79

Closed fs-c closed 3 years ago

fs-c commented 3 years ago 
const Card = ({ children, ...props }) => (<>
    <Box border={`1px solid ${colors.black}`} ... > ... </Box>
</>);

...

<Flex is={Card} row borderColor={colors.red1}> ... </Flex>

I would expect the rendered card to have a red border, but it has a black one. This is because the class name generated for borderColor=... comes before the class names from 'Card' in the generated, final class name.

This is the opposite of what I'd expect, is this intentional? I've looked through the code a bit and I must admit that I'm not sure why this happens.

Edit: For clarity, Flex is a Box wrapper; it just sets display and flexDirection and passes on all to the props to the underlying box.

fs-c commented 3 years ago

Huh, I rewrote the relevant pieces of code and now it works as I'd expect. Not sure what to make of that but I'm not complaining. Sorry for the noise, everyone.