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";
Related
is there a way to disable tailwindcss styles from being applied to certain react components? I am trying to use react-markdown which will convert a markdown file into JSX. However, since tailwindcss will disable the default styling of header tags (eg. the <h1> tag), the markdown does not display properly.
Is it possible to disable tailwind for the specific file that uses react-markdown to render the markdown file? Or is there another way to display markdown files in React using tailwind.
Any help is appreciated!
There is also a typography plugin for tailwind. You could check it out too.
Here is a link for setting up the typography plugin and applying it to only parts of a react app.
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'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?
I am using nextjs for a site and have my css in
Styles components. I want to import modernizr and use this to detect browser features and change the css in my styles components accordingly. I can see I could just use a script tag in the html file but wanted to see if any way modernizr can be used as import. What’s the best way to use modernizr in react?
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.