Здравствуйте ни кто ни знает как обычный css переделать в css styled components react?

Question

[shoshin83]

вот пример
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;`
;
а следуещее не пойму ни как.помогите плииз

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.untitled {
  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;
}
@-webkit-keyframes rotateHue {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  20% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  25% {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
  }
  45% {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
  }
  50% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
  70% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
  75% {
    -webkit-filter: hue-rotate(270deg);
            filter: hue-rotate(270deg);
  }
  95% {
    -webkit-filter: hue-rotate(270deg);
            filter: hue-rotate(270deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}
@keyframes rotateHue {
  0% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  20% {
    -webkit-filter: hue-rotate(0deg);
            filter: hue-rotate(0deg);
  }
  25% {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
  }
  45% {
    -webkit-filter: hue-rotate(90deg);
            filter: hue-rotate(90deg);
  }
  50% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
  70% {
    -webkit-filter: hue-rotate(180deg);
            filter: hue-rotate(180deg);
  }
  75% {
    -webkit-filter: hue-rotate(270deg);
            filter: hue-rotate(270deg);
  }
  95% {
    -webkit-filter: hue-rotate(270deg);
            filter: hue-rotate(270deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
            filter: hue-rotate(360deg);
  }
}

Answer 1

[strelok011]

Если делать 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>
  )
}

Comments

[shoshin83]

спасибо большое буду разбираться

[strelok011]

function App*() { - тут символ * не нужен, промахнулся пока набирал скобки...

[shoshin83]

а спросить можно ?как быть с групированными классами?
пример
.untitled__shutters:before, .untitled__shutters:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 50%;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
background-color: #b3401a;
pointer-events: auto;
}

html, body {
width: 100vw;
height: 100vh;
overflow: hidden;
}

[strelok011]

группированные классы будут работать только внутри компонента, если они в таком виде в разметке лежат.
За пределы компонента стили не уйдут.
Либо же писать такие группы глобально, но при этом компонент должен содержать такие элементы в чистом виде, либо классы комбинировать отрендренные через styled + обычный цсс стиль вида:

<div className={`${className} your-oldstyle-class`}>

const Untitled = styled.div`
display: block
&.your-oldstyle-class {
some styles...
}

`
;

Но если уж взялись за styled компоненты - готовьте их правильно.
И кстати, так не надо делать .untitled__shutters:before, .untitled__shutters:after

В стайлед компоненте это будет выглядеть проще

.untitled {
 &:before, &:after {
 ....
 }
}

Answer 2

[shoshin83]

а повтрять константы нельзя ведь

Comments

[strelok011]

на этот вопрос Вы можете найти ответ разобравшись в замыканиях и в областях видимости переменных :)