import React from "react";
import ReactDOMServer from "react-dom/server";
const render = (Component: React.ReactElement) => {
return `<!DOCTYPE html>\n${ReactDOMServer.renderToStaticMarkup(Component)}`;
};
export default render;
import React from "react";
import render from "../_render";
export default render(<div className="blabl-div">blabla text</div>);
plugins.push(
new HtmlWebpackPlugin({
template: "src/tsx/index.tsx",
filename: "index.html",
minify: false,
inject: "body",
cache: true,
hash: true,
}),
);
script: react-app-rewired build
+ prerender-spa-plugin
slide, slide2, slide..n
dropdown, dropdown2, dropdown..n
td, td2, td..n
ну этим вы немного упростили себе жизнь, не спорю, но думать придётся при каждом импорте что и как назвать всё равно.
Ок, а в чём сложность писать вот так? Особенно используя препроцессор или PostCSS.
Таким образом вы гарантированно задаёте пространство имён, а потенциальные конфликты можно исключить используя scoped-styles в случае описанных выше фреймворков.
но удобство сомнительное, особенно если думать о поддерживаемости проекта.
Ну и ключевой нюанс в том что styled-components использовать удобно лишь с реактивными приложениями на Angular, React, Vue и подобных
Жаль нет кнопки "Не нравиться", а то от таких рекомендаций и появляются куча сайтов выброшенных на помойку.