Когда компонент styleled отсутствует в исходном дереве рендеринга, он не загружает свой стиль. Например, у меня есть карта с некоторыми данными, полученными из API, если API занимает более 2 секунд (приблизительно), стиль не загружен.
const Card = styled.div`
border: 1px solid black;
padding: 5px;
margin: 5px;
border-radius: 5px;
min-width: 200px;
`;
const ToDosPage = ({ createData, toDos, getData }) => {
const [newTodo, setNewTodo] = useState({
expirated: false,
done: false,
done_by: 2,
task: 1,
});
useEffect(() => {
getData('toDos');
}, [getData]);
const renderToDos = () => toDos.map((toDo) => <Card>{toDo.title}</Card>);
return (
<div>
<div>{renderToDos()}</div>
</div>
);
};
const mapStateToPops = (state) => ({ toDos: state.dataManager.toDos });
const mapDispatchToProps = { createData, getData };
export default connect(mapStateToPops, mapDispatchToProps)(ToDosPage);
Я думаю, что, возможно, проблема находится в индексе. html или в веб-пакете:
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--load all styles -->
<title>
my-app
</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './app'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
},
devtool: 'cheap-module-eval-source-map',
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/ },
{
test: /\.(css)$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, {loader: 'postcss-loader', ident: 'postcss'}],
exclude: /node_modules/,
},
],
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html',
}),
],
};
Родительский компонент:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './src/store';
import ToDosPage from './src/pages/ToDosPage';
import TasksPage from './src/pages/TasksPage';
import Menu from './src/components/Menu';
import { colors } from './src/utils/constants';
const App = () => (
<Provider store={store}>
<Router>
<Menu />
<Route path='/todos' component={ToDosPage} />
<Route path='/tasks' component={TasksPage} />
</Router>
</Provider>
);
ReactDOM.render(<App />, document.getElementById('app'));