Basically I want to create a reusable component which can be slightly modified from the outside in react:
SomewhereElse.tsx
...<FooComponent width={200}>...FooComponent.tsx
interface IFooProps { //default width of 150px width?: 150; //default margin of 5px margin?: 5;}interface IFooState{ checked: boolean;}class FooComponent extends Component<IFooProps, IFooState> { constructor(props: IFooProps) { super(props); ... }... render(): ReactElement { return (<div className="foo-component" data-width={this.props.width +'px'}> ...FooComponent.scss
.foo-component { ... width: attr(data-width length); ...But it always gives me the following error when running the application (chrome):
... Please consider that I need a "number" as property because I am doing some calculations based on that number for some of the inner components so everything fits together.
EDIT:
Using "style" is not working for me because I have some ::before ::after features in my scss which are broken when using style because they occasionally modify "right:" based on the width.
For better understanding, this is my base:https://www.sitepoint.com/react-toggle-switch-reusable-component/