Блог

Главная - Вопросы по программированию - Разбейте гигантский глобальный стиль, сохранив доступ к контексту темы

Разбейте гигантский глобальный стиль, сохранив доступ к контексту темы

#reactjs #styled-components

Вопрос:

Я не нашел четкого способа разбить гигантский глобальный стиль на файлы меньшего размера, которые в идеале я мог бы объединить в единый глобальный стиль.

Это достаточно легко сделать, когда вы просто интерполируете, но нужно/нужно сохранить доступ к theme контексту глобального стиля, чтобы цвета можно было применять динамически.

Возможно ли это?

Пример

 import css from 'styled-components'
export const thirdp_pace = css`
.pace .pace-progress {
    background: ${({ theme }) =>theme.primary};
    height: 4px;
}
`


import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle` 
:focus {
    outline: none !important;
}

${thirdp_pace}
`

Это своего рода идея, к которой я хотел бы подойти, но она не работает, потому thirdp_pace что у меня нет доступа theme . И я понимаю, почему, я использую это только в качестве примера. Цель состоит в том, чтобы разбить гигантский глобальный стиль на более мелкие, размером с укус.

В идеале мы бы перенесли большую часть информации о стиле в их отдельные компоненты, но, к сожалению, это гораздо более сложная задача.

Комментарии:

1. Как насчет настройки статического объекта в качестве темы, которую вы затем экспортируете / импортируете, вместо того, чтобы передавать ее через контекст в качестве реквизита? В любом случае, по какой причине он был установлен в магазине?

2. Я не уверен, что понимаю ваш вопрос (я не уверен, о каком магазине вы говорите). theme Объект отображается в области createGlobalStyle и является одним из нескольких объектов , которые по сути являются просто цветовыми отображениями, которые могут быть применены на лету, поэтому я не могу просто выбрать один объект темы.

3. Взгляните на: codesandbox.io/s/styled-components-theme-3x6o0 — Я включил не только цвета, но и все возможные переменные, которые вам понадобятся для обеспечения согласованности в вашем приложении. Сделано на основе материала-пользовательский интерфейс: material-ui.com/customization/default-theme/#default-theme

4. Затем вы можете разбить свою тему на другой файл и экспортировать / импортировать ее там, где вам это нужно — лично мне нравится хранить все глобальные стили в одном файле, хотя я нахожу его немного более организованным, но на самом деле это просто личные предпочтения

5. То, что вы описываете / показываете здесь, в значительной степени то, что я делаю. Мой вопрос заключается в том, чтобы разбить фрагменты глобального стиля на отдельные объекты, которые будут включены, гарантируя сохранение доступа к объекту темы. Смотрите пример, который я привел. Мне не хватает этой идеи в вашей ссылке codesandbox?

Ответ №1:

Решение: Не используйте css — просто верните нужную строку CSS и вызовите функцию

 export function thirdp_pace(theme) {
    return `
        .pace .pace-progress {
            background: ${theme.primary};
            height: 4px;
        }
    `
}

Затем

 import {thirdp_pace} from './styled-components/thirdparty-overrides/pace'
export const GlobalStyles = createGlobalStyle` 

${
    ({theme}) => thirdp_pace(theme)
}
`
Метки: ,