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.
Related
I create Table Component and using Table.scss file for css. But It does not apply to StoryBook. This is my first time to use StoryBook. All the component's feature and functionality and doc are working as expected. But All css style are not woking in StoryBook. May I know how to add my Table.scss file into StoryBook.
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?
How can I use plane Css in mui V5 components. I want to call a css classes to mui components and modify the mui styles. I don't want to use styled. Only using a plane Css.
Iam using react typescript and mui v5
Example: I have a mui Button component and want to specify className="editbutton" and the css properties for this class is in css file
sample
And in css file
. editbutton { color:'red'; background-color:'green'}
How do I achieve this, what are the changes that needs to be done in any of the files and what are the things that needs to added
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 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?