قابل تغییر بودن طول switch toggle

سلام. من در حال ساختن یک reusable component برای toggle switch هستم. چون هر سری متن متفاوتی رو استفاده میکنم باید width رو به عنوان props خودم بفرستم
این کد تاگل:

.toggle-switch {
    position: relative;
    width:170px ;
    display: inline-block;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    text-align: left;
  }

اینجا width رو 170 قرار دادم. اما چجوری میشه اون رو داینامیک گرفت؟ از data attr استفاده کردم جواب نداد.
این هم کامپوننت toggle:

import React, { Component } from "react";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name={this.props.name}
          id={this.props.id}
          dataWidth={this.props.dataWidth}

        />
        <label  className="toggle-switch-label"   htmlFor={this.props.name}>
          <span   dataYes={this.props.dataYes}   dataNo={this.props.dataNo} className="toggle-switch-inner" />
          <span  dataNo={this.props.dataNo}   dataYes={this.props.dataYes} className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

dataWidth رو استفاده کردم و به صورت width:attr(dataWidth px) توی css ازش استفاده کردم که درست نشد. ممنون میشم راهنمایی کنید چجوری داینامیک width رو دریافت کنم.

@hesammousavi
@mohsenbostan