Если делать styled components react, то, исходя из названия - компонент тянет свои стили вместе с собой на страницу.
То бишь - создаем styled компонент описанным выше вариантом
const Untitled = styled.div`
position: absolute;
height: 100%;
width: 100%;
-webkit-animation: rotateHue infinite 20s linear;
animation: rotateHue infinite 20s linear;
-webkit-animation-delay: 0.625s;
animation-delay: 0.625s;`
;
Если внутри нашего стилизуемого div будут находиться еще теги со своими классами вида
<div className={className}>
<div className="sample-class">
</div>
</div>
то этот новый стиль можно вложить внутрь обертки styled как в scss:
const Untitled = styled.div`
position: absolute;
height: 100%;
width: 100%;
-webkit-animation: rotateHue infinite 20s linear;
animation: rotateHue infinite 20s linear;
-webkit-animation-delay: 0.625s;
animation-delay: 0.625s;
.sample-class {
color: red;
&:hover {
color: green;
}
}`
;
В отличие от глобальных стилей, которые обычно кладутся в какой-нибудь отдельный файл типа global-styles.js вида
const { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
html {
width: 100%;
}
`
export default GlobalStyle;
который импортить в корне приложения index.js
import GlobalStyle from '../path/global-style';
function App*() {
return (
<div>
<div>your app content</div>
<GlobalStyle />
</div>
)
}