Глобальные стили для react приложения(styled-components)

Question

Есть приложение, которое будет внедряться на сторонние сайты путем подключения скрипта. Как реализовать глобальные стили для styled-components, чтобы они не перекрывали компонентные? Пытался ~ так В корне index.tsx инжектим стили

injectGlobal`
  ${resetStyles()}
`;

resetStyles() возвращает нам css

        .className * {
            div,
            span,
            applet,
            object,
            iframe,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            p,
            blockquote,
            pre,
            a,
            abbr,
            acronym,
            address,
            big,
            cite,
            code,
            del,
            dfn,
            em,
            img,
            ins,
            kbd,
            q,
            s,
            samp,
            small,
            strike,
            strong,
            sub,
            sup,
            tt,
            var,
            b,
            u,
            i,
            center,
            dl,
            dt,
            dd,
            ol,
            ul,
            li,
            fieldset,
            form,
            label,
            legend,
            table,
            caption,
            tbody,
            tfoot,
            thead,
            tr,
            th,
            td,
            article,
            aside,
            canvas,
            details,
            embed,
            figure,
            figcaption,
            footer,
            header,
            hgroup,
            menu,
            nav,
            output,
            ruby,
            section,
            summary,
            time,
            mark,
            audio,
            video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }
            /* HTML5 display-role reset for older browsers */
            article,
            aside,
            details,
            figcaption,
            figure,
            footer,
            header,
            hgroup,
            menu,
            nav,
            section {
                display: block;
            }
            body {
                line-height: 1;
            }
            ol,
            ul {
                list-style: none;
            }
            blockquote,
            q {
                quotes: none;
            }
            blockquote:before,
            blockquote:after,
            q:before,
            q:after {
                content: '';
                content: none;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
    }
`;

Таким образом ресетающие стили оказываются сверху, и перекрывают компонентные. Так же пытался через id, пробовал через доп. настройки createStyledComponentsTransformer настроить сборщик - так же не вышло. Может кто сталкивался?

Answer 1

Обычно следует ипортировать стили типа reset.css только один раз, в самом первом файле, который будет загружен (index.html).

После чего все последующие стили, которые будут добавлен напрямую к элементам и/или через другие файлы будут накладываться поверх стилей reset.css создавая каскад.

В случае со Styled Components создаете нужные Вам стили в отдельном файле, экспортируете их и добавьте в основной файл:

import styled, { createGlobalStyle } from "styled-components"

export const ResetStyle = createGlobalStyle `
  button {
    color: black;
  }
  // ... остальные стили
`

Answer 2

Присвойте родительскому блоку "внедренца" класс .my-widget и используйте глобальные стили только для дочерних элементов класса:

.my-widget p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

Таким образом ваши стили не будут влиять на изначальную страницу, только на часть которую вы внедряете.

БЛОГ НА HUSL

Глобальные стили для react приложения(styled-components)

Ответы (2 шт):