Override Component Style

I'm red!!
I'm blue!!
I'm gray!!
1import React from 'react';
2import { styled } from '@filbert-js/core';
3
4const Box = styled('div')`
5 background: gray;
6 color: white;
7 border: solid 1px gray;
8 padding: 0.5rem;
9`;
10
11const BlueBox = styled(Box)`
12 background: #1f368f;
13`;
14
15const RedBox = styled(Box)`
16 background: red;
17`;
18
19const Container = styled('div')`
20 display: flex;
21 > * + * {
22 margin-left: 1rem;
23 }
24`;
25
26render(
27 <Container>
28 <RedBox>I'm red!!</RedBox>
29 <BlueBox>I'm blue!!</BlueBox>
30 <Box>I'm gray!!</Box>
31 </Container>,
32);