I am looking to add a feature in my React and Redux web app that allows users to switch between two different themes.
Currently, I have two separate CSS files for each theme, which I import at the top of my App.js file to apply the styles.
import '../styles/theme1.css';
const App = (props) => {
return (
<div>
<Header />
<Container/>
</div>
);
};
const mapStateToProps = (state) => ({
theme: state.settings.theme // can be 'theme1' or 'theme2'
});
export default withRouter(connect(mapStateToProps)(App));
Instead of importing the CSS file statically, I want to dynamically import the styling based on the current theme stored in the application's state ('theme1' or 'theme2').
I have come across some solutions and packages, but I am curious to find out if there is a recommended and cleaner approach to achieve this efficiently.
The project is built using create-react-app.
Thank you.