Any way to use classes instead of inline styling in this scenario?

Let's say I have this simple ListItem component in React.

const ListItem = ({ width, children }) => <li style={{ width }}>{ children }</li>.

What I want to do is, instead of using inline styling, to add a class, something like <li className={ `list-item--${ width }` }>{ children }</li>, then, in Less, I want to style that class by "extracting" the width from the class, something like this.

.list-item--@{ className } {
  @width: className;
  width: @@width;
}

Since I am a total beginner in Less, I don't know if this can be achieved. Or is there another way we can do this?