Labels

@filbert-js generates dynamic class name for the styling. Sometimes, we may want more readable class name.

@filbert-js allows labeling components

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