Как передать значение свойства в ::before класса динамически?

Question

[Павел Орловский]

Мне нужно менять background в image__frame::before динамически. Как мне добраться до этого свойства через React?

Есть такой scss:

.image__frame {
    filter: url('#border-radius');
    width: 95%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: -5%;
    left: 5%;

    &::before {
        content: "";
        display: block;
        padding-top: 55%;
        background: #991E66;
        clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    }
}

И такой react js:

<div className={style.image__frame}></div>
                  <svg
                    style={{ visibility: 'hidden', position: 'absolute' }}
                    width="0"
                    height="0"
                    xmlns="http://www.w3.org/2000/svg"
                    version="1.1"
                  >
                    <defs>
                      <filter id="border-radius">
                        <feGaussianBlur
                          in="SourceGraphic"
                          stdDeviation="15"
                          result="blur"
                        />
                        <feColorMatrix
                          in="blur"
                          mode="matrix"
                          values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -9"
                          result="border-radius"
                        />
                        <feComposite
                          in="SourceGraphic"
                          in2="border-radius"
                          operator="atop"
                        />
                      </filter>
                    </defs>
                  </svg>

Answer 1

[Александр Талалаев]

В целом если такое происходит повод избавиться от псевдоэлемента, в подобных случаях почти всегда это можно сделать заменив его на настоящий с теми же свойствами.
В свойстве style нельзя обращаться к псевдоэлементам, поэтому для интерактивности в схожем стиле можно использовать styled components:
Где-то в ваших стилях:

.testClass {
  font-size: 1.5em;
  text-align: center;
  color: #bf4f74;
}

.testClass::before {
  content: 'QQ';
  position: absolute;
  top: 10px;
}

В компоненте:

// ... 
const [textColour, setTextColour] = useState('blue');
const TestElement = styled.h1`  
  &:before {
    color: ${textColour}
  }
`;

 return (
    <>  
  <button
          onClick={() =>
            setTextColour((color) => (color === 'black' ? 'red' : 'black'))
          }
        >
          Change color of :before
        </button>   
      <Title TestElement="testClass"> HELLO </Title>
    </>
  );

Таким образом можно будет менять интерактивно свойства псевдоэлемента.

Comments

[Алексей]

Александр Талалаев А сами пробовали через инлайн стили псевдо-элементы стилизовать?
Инлайн стили нельзя использовать для стилизации псевдо-элементов и псевдо-классов

[Алексей Уколов]

И к ним нельзя обратиться из js.

[Павел Орловский]

Ни одного варианта не сработало. И эти 2 варианта я уже пробовал)

[Александр Талалаев]

Алексей Павел Орловский боже ребят простите. Первый вариант я 100% был уверен что использовал, но оказалось я делал в styled components. Я в целом редко style дергаю, поэтому немного запутался. Ну и да через style в принципе нельзя это сделать по спецификации.
Прошу прощения. Исправлю ответ на styled components.