@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--1093896854BlueBox BlueBox-1091710721import React from 'react';2import { styled } from '@filbert-js/core';34const Base = ({ className }) => <div className={className}>{className}</div>;56const 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`;1819const Container = styled('div')`20 display: flex;21 > * + * {22 margin-left: 1rem;23 }24`;2526render(27 <Container>28 <Box />29 <BlueBox />30 </Container>,31);