Как создать реагирующий компонент с типизированным стилем интерфейса в машинописи, используя таблицы стилей CSS?

Question

Я ищу способ создания повторно используемых компонентов реагирования в машинописном тексте, которые имеют стили по умолчанию, которые могут быть изменены пользователями. Часть «problemmati c» состоит в том, что я хочу использовать интерфейс, чтобы формализовать, как настроить стили компонента и сделать его совместимым с таблицей стилей css.

Мне удалось это сделать, но я не использовал css таблицы стилей.

В настоящее время я делаю следующее:

1) Я определяю свой стиль интерфейса (не показан, но очевиден) и стиль по умолчанию в классе компонентов.

const defaultProps: ItComponentStyles = {
    styles: {
        label: {
            fontFamily: 'Comic Sans MS',
            color: 'green'
        }
    }
}

2) Затем я использую стиль по умолчанию, объединенный со свойствами пользовательского стиля пользователя в классе Component:

    render() {
        const styles = Object.assign(
            {},                     // target (starting with)
            defaultProps.styles,    // some pre-defined default React inline-style for the component
            this.props.styles       // allow consumers to override properties
        );

        return (
            <div>
                <label style={styles.label}>Hello stackoverflow community!</label>
            </div>
        );
    }

3) Пользователь может изменить стиль по своему усмотрению:

const newStyles: ItComponentStyles = {
  label: {
      fontFamily: 'Calibri',
      color: 'blue'
  }
};
[...]
<Component styles={newStyles} />

Как сделать то же самое, но с помощью CSS таблиц стилей для определения стилей?

Кстати, что вы думаете об этом способе управления стилями (я новичок в начале конец разработки)?