0

I'm new to React. So I found out that there is a CSS mixing problem going on in my React code. So I used CSS modules to solve that problem. But when I'm doing a frontend React JS project with Bootsrap, I came up with this problem.

enter image description here

So In this Carousel component, there are hidden(those are only shown in compiled HTML files) CSS classes called carousel-control-next and carousel-control-prev. So I need to change their CSS styles with CSS modules. So how can I access them?

enter image description here

I imported this CSS module file as a CSS module in my React file, but it's not working. Can someone help me with this problem? Thanks in advance.

Improve this question

1 Answer 1

Reset to default
1

You have to use :global to get not modular styles such as styles for Carousel

https://github.com/css-modules/css-modules#exceptions

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
But what If we have two CSS files for two react files, like that and we have to use different stylings for those components that are declared in a third-party library you're importing, so you might have no control. When I add global I saw that the stylings are going for all of those two files. But I need to control those classes differently.
As an example, I need to access that carousel-control-next class and need two different styles in two files. But the thing is that the carousel-control-next class cannot be controlled normally because it's inside that Bootstrap carousel.
oh, I found out the answer for that. I just applied two different classes for parent's elements of those classes and referenced them in that CSS class with that uncontrollable CSS class.

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.