Steps
- Put object with
toString() method to className prop for Button or any other component
- Check out generated class name
Code example:
import React from "react";
import { render } from "react-dom";
import { Button } from "semantic-ui-react";
class BEM {
constructor(blockName) {
this.block = blockName;
}
el(element) {
return {
mod: modf => `${this.block}__${element}--${modf}`,
toString: () => `${this.block}__${element}`
};
}
toString() {
return `${this.block}`;
}
}
const App = () => {
const css = new BEM("block");
return (
<div className={css}>
<button className={css.el("native")}>Native button</button>
<br />
<Button className={css.el("semantic")}>Semantic button</Button>
</div>
);
};
render(<App />, document.getElementById("app"));Expected Result
<div id="app">
<div class="block">
<button class="block__native">Native button</button>
<br>
<button class="ui button mod block_semantic" role="button">Semantic button</button>
</div>
</div>Actual Result
<div id="app">
<div class="block">
<button class="block__native">Native button</button>
<br>
<button class="ui button mod toString" role="button">Semantic button</button>
</div>
</div>With warning for propType violation
Version
0.78.3
Testcase
https://codesandbox.io/s/j25zwlxmmw
Steps
toString()method to className prop for Button or any other componentCode example:
Expected Result
Actual Result
With warning for propType violation
Version
0.78.3
Testcase
https://codesandbox.io/s/j25zwlxmmw