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);