@shoshin83

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

вот пример
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);
  }
}
  • Вопрос задан
  • 51 просмотр
Решения вопроса 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>
  )
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@shoshin83 Автор вопроса
а повтрять константы нельзя ведь
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы