#reactjs #material-ui #jss
#reactjs #материал-пользовательский интерфейс #jss
Вопрос:
В настоящее время я работаю над проектом, в котором все его стили объявлены в JSS. Одним из «преимуществ», отмеченных во многих статьях и документах библиотеки, является то, что он инкапсулирует стили. Однако мне действительно сложно настраивать их, особенно когда дело доходит до стиля, который зависит от окружающего контекста компонента (под контекстом я подразумеваю родительские элементы, братьев и сестер и т.д.).
Рассмотрим следующие стили, экспортируемые вместе с компонентом, вызываемым FieldDescriptor через withStyles HOC:
info: {
fontFamily: theme.typography.fontFamily.light,
fontSize: "12px",
padding: "0 24px 8px 24px",
letterSpacing: 0.3,
},
Этот класс будет найден как FieldDescriptor-info-xxx в элементе, имеющем этот класс. Теперь предположим, что этот компонент является дочерним по отношению к другому компоненту, который пытается настроить таргетинг на error класс. Вы могли бы настроить таргетинг на этот класс с помощью чего-то вроде [class*=FieldDescriptor-error] (лично я уже считаю это очень нечистым подходом), и это будет работать только в среде разработки.
При производстве классы станут уникальными (например, jss-xxx), и селекторы, подобные приведенному выше, больше не будут полезны. Мой вопрос в том, какой самый чистый или «правильный» подход к настройке стилей компонентов, подобных этому, в JSS? Я либо упускаю что-то действительно очевидное, либо, возможно, сталкиваюсь с ограничениями JSS.
Я с нетерпением жду решений, которые не требуют дополнительных инструментов или раздувания кода, которые действительно не соответствовали бы цели внедрения JSS в первую очередь.
Вы можете найти пример использования обоих withStyles и useStyles здесь
Ответ №1:
Попробуйте представить компонент как черный ящик, который намеренно скрывает детали реализации от внешнего мира.
В этой модели только сам компонент отвечает за его представление, поэтому вам нужно попросить этот компонент что-то изменить. В React world вы делаете это большую часть времени, передавая реквизиты этому компоненту.
Внутри этого компонента вы можете пойти несколькими путями, комбинируя предопределенные классы в зависимости от реквизитов (предпочтительно, поскольку статические) или используя правила / значения функций, которые позволяют вам получать доступ к реквизитам и определять стили для каждого экземпляра компонента.