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?
Related
I'm developing a component library in React using Styled Components and Rollup as a bundler. Also, I'm using Storybook.
Now I want to add the Open Sans font from Google Fonts. I know how to do this when developing a standard React project, but I'm not sure how to do this when developing a component library.
What I tried/ways I know of:
Adding the link to the head of the HTML document (I don't have an HTML document since I'm developing a component library)
Creating a GlobalStyles object using Styled Components and inserting an #font-face there (I don't think this is possible since the GlobalStyles object needs to be inserted in the JSX of the index.ts file which I don't have)
Does anyone know how I should handle this?
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";
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.
Is it possible to use animations and media query in react without css only using javascript or jsx?
Sure but you have to properly configure your bundler or else everything has to be inline css.