Стилизованные компоненты с использованием псевдоэлемента: проверено - PullRequest
Новая
       16

Стилизованные компоненты с использованием псевдоэлемента: проверено

1 голос
/ 05 июня 2019

Я делаю компонент переключателя со стилизованными компонентами, и когда он переключается, я хочу изменить цвет фона.Здесь я пытаюсь выбрать и изменить его ${SwitchInputUI}:checked + ${SwitchSliderUI}{ background-color:#737A9B;}, но это не работает.Я правильно выбираю?Вот полный код. Пожалуйста, помогите мне 

import React from 'react';
import styled from 'styled-components'

const SwitchInputUI = styled.input.attrs({ type: 'checkbox' })`
    opacity: 0;


`
const SwitchUI =styled.label`
    position: relative;
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-bottom: 0;
    vertical-align: middle;
    ${SwitchInputUI}:checked + ${SwitchSliderUI}{ 
        background-color: #737A9B; 
    }
     ${SwitchInputUI}:checked + ${SwitchSliderUI}:before{
        transform: translateX(10px);
    }

`

const SwitchSliderUI= styled.span`
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#BBCDD9;
    transition: .4s;
    border-radius: 10px;

    &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        left: 1px;
        bottom: 1px;
        background-color: #FFF;
        transition: .4s;
        border-radius: 50%;
    }
`

const Switch = () => {
  return (
      <SwitchUI> 
          <SwitchInputUI/>
          <SwitchSliderUI/>
      </SwitchUI>
  );
};
export default Switch;

Ответы [ 2 ]

1 голос
/ 05 июня 2019

Проблема в том, что вы используете SwitchSliderUI в SwitchUI до того, как вы его определили.Измените порядок и все работает. 

import React from 'react';
import styled from 'styled-components'

const SwitchInputUI = styled.input.attrs({ type: 'checkbox' })`
    opacity: 0;
`

const SwitchSliderUI= styled.span`
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#BBCDD9;
    transition: .4s;
    border-radius: 10px;

    &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        left: 1px;
        bottom: 1px;
        background-color: #FFF;
        transition: .4s;
        border-radius: 50%;
    }
`
const SwitchUI =styled.label`
    position: relative;
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-bottom: 0;
    vertical-align: middle;
    ${SwitchInputUI}:checked + ${SwitchSliderUI}{ 
        background-color: #737A9B; 
    }
     ${SwitchInputUI}:checked + ${SwitchSliderUI}:before{
        transform: translateX(10px);
    }
`

const Switch = () => {
  return (
      <SwitchUI> 
          <SwitchInputUI/>
          <SwitchSliderUI/>
      </SwitchUI>
  );
};
export default Switch;

Рабочая песочница здесь: https://codesandbox.io/s/sad-thompson-sfzfv

0 голосов
/ 05 июня 2019

Попробуйте, если это поможет: 

${SwitchInputUI} + ${SwitchSliderUI}{ 
    '&:checked':{background-color: #737A9B; }
}
...