I'm using styled-components in my reactjs app and I'm on a very frustrating situation, where my component defined styles get overridden by my global styles (that I import in the index.js file). I can solve this issue by using !important in those rules, but this is very far from ideal.
So, how can I make the styled-component script to inject the style dynamic tags AFTER the global injections? Is this configurable?
Related
In my React application I'm rendering a MapView. However, the zoom in/out button along with any popup templates are appended below the map in standard html.
When I previously used esri-loader for importing arcgis modules, I could fix this issue by setting a CSS option to true, like so. The styling would match the API examples.
loadModules(["esri/views/MapView"], {css: true})
But I can't find any instance of a CSS or styling property in the MapView class. So how do I apply this styling when using #arcgis/core for imports?
The documentation recommends importing directly from the cdn:
#import "https://js.arcgis.com/4.20/#arcgis/core/assets/esri/themes/dark/main.css";
Or if you want to import it from your local, you can follow their instructions for referencing local assets, and import from your node_modules:
#import "#arcgis/core/assets/esri/themes/dark/main.css";
I am writing a single page application using ReactJS and MaterialUI. Some of my components doesn't match MaterialUI docs. I found these components' styles are being updated by another NodeJS module (#craftercms/studio-ui) which is using same MaterialUI library.
Is there a way in ReactJS or MaterialUI to not load styles from specific NodeJS modules?
I know one way is to simply override styles in my theme but maintenance of that will not be fun.
You need to create your own theme and add an MUI's ThemeProvider (from #material-ui/styles) component surrounding your App.
You're probably using our CrafterCMSNextBridge component. That component has it's own theme provider, so make sure your ThemeProvider is inside so that one is the prevailing one.
Something like this…
<CrafterCMSNextBridge>
<ThemeProvider theme={yourCustomTheme}>
<App />
</ThemeProvider>
</CrafterCMSNextBridge>
Worth noting that in a coming version of our package, it'll be easier to configure the theme to use.
I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?
I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.
Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.
Edit: added minimal set of required scss classes. bootstrap 4.5
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/_variables";
#import "../node_modules/bootstrap/scss/_mixins";
#import "~bootstrap/scss/_carousel.scss";
The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.
Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.
I have index.css,style.css and index.js, header.js in my react code both CSS is applying to a single component how to block applying CSS
If i got you right, and you want to make sure that the both css's are not applying too the whole app, you should be more specific about your css rules. try to nest them, or use sass.
Most of my site is using Bulma classes for some of my global UI styling, and I'd like to continue to use those classes within my components, but also be able to define CSS Modules for those components for custom per component tweaks.
Because of this, I added babel-plugin-react-css-modules to my project which has allowed me to use my Bulma classes in className and put my module classes in styleName. Ok, a little hacky feeling, but it's working. I've got a global-styles.scss file in a CSS directory that I'm loading into my main app component. This is where I'm importing Bulma, as well as defining any of my own global styles.
My issue is that my when my global styles and my module styles all get smashed together (via css-modules?) and injected into a style tag in the head (via style-loader?), my module styles get defined first, then my global styles.
I feel like the module styles are locally scoped and should always take precedence (load last), even if I'm loading both global and scoped styles in the same component. For example, in one component I'm using Bulma's .navbar classes, but I'm also defining my own .navbar class in my CSS Module for that component, and I'm applying both to the same element in my component.
Is there anyway I can specify what order to build the style tag? Between all of these plugins I'm just lost, then when you throw Gatsby's plugin abstraction on top of it and it's all very confusing.
I'm not entirely certain of what was causing the issue, but it seems to pertain to Gatsby.
https://www.gatsbyjs.org/tutorial/part-two/#component-css
Tip: This part of the tutorial has focused on the quickest and most straightforward way to get started styling a Gatsby site — importing standard CSS files directly, using gatsby-browser.js. In most cases, the best way to add global styles is with a shared layout component.
Their recommended approach is to import your global files in your layout component. This was loading my globals after my modules. However, creating a gatsby-browser.js file, and importing my globals there is loading my styles in the intended order.