Как перенести глобальные стили в область эмоций? - PullRequest
Новая
       5

Как перенести глобальные стили в область эмоций?

4 голосов
/ 06 марта 2020

В настоящее время мне нужно интегрировать общие компоненты библиотеки в несколько веб-сайтов. Компонент библиотеки в настоящее время имеет глобальные стили. Это они вводят следующим образом: 

  <Global
    styles={`
        div {
          padding: 0;
        }
    `}
  />

Я хочу, чтобы «Глобальные стили» были доступны только для компонентов этой библиотеки. Они только на части страницы.

Итак, я попробовал это: 

const Styles = styled.div`
        div {
          padding: 0;
        }
`;

const Page = () => (
    <Styles>
        <SomeComponentsOfTheLibrary />
    </Styles>
);

Но, похоже, все в Styles имеет приоритет. Тогда, если компонент имеет padding: 10px;, потребуется padding: 0; из Styles

Вот воспроизведенная проблема:

Я знаю, что это css проблема, но я хочу решить ее с эмоциями

Я уже видел:

1 Ответ

1 голос
/ 09 марта 2020

Как переместить глобальные стили в область эмоций?

@ Andarist нашла решение для этого, создав плагин Styles для дополнительной области видимости

Пример

Создание кэша с плагином stylis для дополнительной области 

const STRONG_ID = 'very-strong-id';
const cache = createCache({
  stylisPlugins: [createExtraScopePlugin(`#${STRONG_ID}`)],
});

Использование глобальных стилей в поставщике кэша 

     <CacheProvider value={cache}>
        <Global
          styles={css`
            div {
              background-color: red;
            }
          `}
        />
        <div id={STRONG_ID}>
          <div>I must be red (global style scoped to the parent div)</div>
          <Container>
            I must be blue (local style defined on this div)
          </Container>
        </div>
      </CacheProvider>

Тогда ваши глобальные стили будут расширены до very-strong-id

Вы можете найти пример здесь

Надеюсь, это поможет кому-то в будущем ?

...