Пару слов о стилизации React компонентов

А как передать не булево свойство внутрь?

Внутрь ничего передавать не нужно, расценивайте это не как улучшение styled-components, а больше как улучшение css-modules, т.е. мы избавились от использования библиотек типа `classnames` и ручной генерации значения свойства `className`, а всё остальное осталось как и было, т.е.

.avatar {
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

import { Div } from './styles.css'

function Avatar(props){
 	return <Div avatar style={{backgroundImage: `url(${props.src})`}} /> 
}

И более менее сложный лэйаут будет требовать десятка дивов, импорты превратятся в Div as ComponentWrapper.

В том то и дело, что всё будет гораздо проще :)

import { Div } from './styles.css'

function Layout(props){
 	return <Div wrapper>
    	<Div header />
    	<Div aside />
        <Div content>{props.children}</Div>
  		<Div footer />
  </Div>
}

при этом в стилях у нас

.wrapper{}
.header{}
.aside{}
.content{}
.footer{}

Синтетический пример, но думаю замысел понятен :)

получаем значение из проперти. к слову, это можно вообще нативно через дата аттрибут сделать, но вроде как там возможности пока что сильно лимитированны

кстати спасибо за идею! обязательно покопаю в эту сторону, дабы упростить подобное

style={{backgroundImage: `url(${props.src})`}}

А как передать не булево свойство внутрь?

изначально не правильно понял ваш замысел, подумал что вы хотите пробрасывать свойства внутрь, как в styled-components, поэтому исправляюсь и прошу первый абзац моего ответа изложить в следующей редакции:

для динамического определения какого-то свойства компонента необходимо использовать подход css-modules, а именно передачу через свойство `style`

спасибо)

получаем значение из проперти. к слову, это можно вообще нативно через дата аттрибут сделать, но вроде как там возможности пока что сильно лимитированны

развивая эту тему - можно заюзать установку значений переменных через атрибут style, т.е. например (тут нужно соглашение) все свойства, начинающиеся с двойного нижнего подчеркивания

<Div name __fontSize="14px">John</Div>

конвертировать в переменные, получая на выходе

<div class="name" style="--fontSize: 14px">John</div>

доступ к которым получать через `var(...)`

.name {
	font-size: var(--fontSize);
}

что я собственно и сделал

Тут всё хорошо :)

<Div root red className="anotherClassName" />

на выходе даст, что-то типа

<div class="_root_78bp722 _red_53ds782 anotherClassName"></div>

т.е. значение свойства `className`, если оно определено, будет проброшено до целевого компонента

да, вы всё правильно поняли, с использованием css-modules это выглядело бы так

import styles from './styles.css'

function Component(props) {
    let cn = styles.root
    
    if(props.red) cn += ' ' + styles.red
  
    return (
        <div className={cn}>...</div>
    )
}

с использованием, например, библиотеки classnames, так

import styles from './styles.css'
import classnames from 'çlassnames'

function Component(props) {
    const cn = classnames({
      [styles.root]: true,
      [styles.red]: props.red
    })
  
    return (
        <div className={cn}>...</div>
    )
}

всё что делает candy - прячет работу по формированию свойства `className` под капот

import { Div } from './styles.css'

function Component(props) {
    return (
        <Div root red={props.red}>...</Div>
    )
}

во всём остальном на выходе мы получаем тоже что и в css-modules, что-то типа

<div class="root_23sadsd red_32423xad2">...</div>

На компонентах размера побольше хорошо заметна разница в читабельности кода

Для сравнения css-modules:

const Post = (props) => {
    /* ... */ 
    return (
        <div className={styles.post}>
            <div className={styles.cover} style={{ backgroundImage: `url(${cover})` }} />
            <div className={styles.info}>
                <div className={styles.title}>{title}</div>
                <div className={styles.stats}> 
                    <span className={styles.comments}>{commentsCount}</span>
                    <span className={styles.likes}>{likesCount}</span>
                </div>
            </div>
        </div>
    )
}

candy:

const Post = (props) => {
    /* ... */ 
    return (
        <Div post>
            <Div cover __src={`url(${cover})`} />
            <Div info>
                <Div title>{title}</Div>
                <Div stats> 
                    <Span comments>{commentsCount}</Span>
                    <Span likes>{likesCount}</Span>
                </Div>
            </Div>
        </Div>
    )
}

В такой верстке сразу видно и используемые теги, и используемые стили. Это чище на вид и легче для восприятия, если знаешь правила по, которым создан и работает код.

Будем честны - в большинстве случаев при верстке у тегов мы максимум, что определяем - обработчики событий типа `onClick` и свойство `className`. Думаю нет ничего сложного в том, чтобы распознать, что `<Span comments>` это тег `span` со стилем class="comments"`. Откуда этот стиль берется видно по импорту, typescript плагин также подсветит ошибку при её наличии.