Stack Overflow на русском Asked on November 5, 2021
Есть приложение, которое будет внедряться на сторонние сайты путем подключения скрипта.
Как реализовать глобальные стили для 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 настроить сборщик – так же не вышло.
Может кто сталкивался?
Присвойте родительскому блоку "внедренца" класс .my-widget
и используйте глобальные стили только для дочерних элементов класса:
.my-widget p {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
Таким образом ваши стили не будут влиять на изначальную страницу, только на часть которую вы внедряете.
Answered by ZiiMakc on November 5, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP