Attach dynamically a pseudo-class :before to a label inside a component

23 Views Asked by At

I want to attach dynamically a pseudo-class :before to a label inside a component whose data come from a db. I know one cannot manipulate pseudo-class (easily/safely) with JS vanilla. So I think about adding this pseudo-class inside the JSX code. Is it possible and how to achieve this goal?

import React from 'react';

const Comp = (props) => {
  return (
    <div>
      <label
        className="label" {/* Common to all Comps */}
        HERE : insert style which allows to défine pseudo-class :before on label 
        which is specific to each component Comp; props.id is an id for 
        each Comp that can be used to create dynamically this class
      >
        {props.labelName}
      </label>
    </div>
  );
};

export default Comp;

I tried another way by simulating a pseudo-class with a span before the label. It works since it is easy to create a class but in this case, label and span are not linked and I need to drag&drop the label with its pseudo-class, which is easy with pseudo-class and more complicated with two separate elements.

0

There are 0 best solutions below