1

There are two components wherein only one component will be rendered at a time conditionally. Every component has its respective CSS file which gets loaded inside the component using import statement, i.e. import 'Header.css'.

The problem is, even if one component is rendered, I could see both CSS files in the page Header. Is there any way to avoid loading unused /(unrendered) components?

Note 1: Can't use module css due to a technical reason as it needs entire app refactoring

Note 2: Found a couple of similar questions in SO but none of them have proper answers.

Load component css when component render

Load a component's CSS only if it is rendered

The below question has an accepted answer but the solution seems not working in react 18 with Webpack 4 :

React: Load component's CSS only when component is rendered

Improve this question
Related questions
1655
How do I style a <select> dropdown with only CSS?
937
Detect click outside React component
1306
React-router URLs don't work when refreshing or writing manually
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.