Storybook applies default styles to the the story canvas iframe. This prevents my stories from looking the way they should. How can I get rid of Storybook's default styles?
For example, here is the default style for an h2 element (via Storybook's page.css):
The source of that page.css is webpack://src/stories/page.css.
If I add styles in preview-head.html, Storybook will apply my custom styles AND the default Storybook styles, with the default Storybook styles taking precedence (unless my custom style has a strong specificity).
By default when installing Storybook via npx sb init for React, Storybook adds a Page.tsx (.js) file under src/stories. In that file they import './page.css'; simply remove that import and you'll be set.
Hope this is your fix... It may be different depending on what framework you're using.
Don't use MDX Syntax.
I had same issue and it was because I was using MDX Syntax.
When I started using the export syntax it didn't apply any built-in CSS classes.
Related
Is it possible to have different CSS for Different React components.Currently am Using import "./css/name.css" to import local CSS but this same CSS is also being applied on another component even when i don't import this CSS for other Component.
If you want to use seperate css for every component you can create react app module.css feature
css module will help, or alternatively you can install styled-component via npm
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'm using an unejected create-react-app project with MaterialUI and trying to replace JSS with Styled Components. It's working fine, but the class names generated are not human readable.
I read that you can use a babel plugin to do that, but I can't change the Babel config without ejecting the project. I know that you can supply a custom class name generator function to StylesProvider to generate JSS class names. Is there a similar mechanism for Styled Components that would allow me to change the class names without ejecting my project?
Basically import like this, with macro:
import styled from "styled-components/macro";
It has the same functionality of the plugin, take a look in the documentation:
https://www.styled-components.com/docs/tooling#babel-macro
example here:
https://codesandbox.io/s/nostalgic-sea-8m3q1?fontsize=14
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 want to selectively use semantic-ui-css classes in my components. The problem is that I use PostCSS modules option which scopes locally all the class names for a specific component. When I use semantic-ui-react components, for example a button, it renders element button with classes ui button, but the included css gets scoped locally so instead of button i get button-min_ui__14RRq
I need to do one of two things:
Import Semantic-ui css without the classes being scoped locally
Make Semantic-ui components to use classes that are being scoped locally
For now I see that I have only one option:
import React from 'react';
import { Button } from 'semantic-ui-react'
import semantic from 'semantic-ui-css/components/button.min.css'
export default class Test extends React.Component {
render(){
return (
<Button className={[semantic.ui, semantic.button]}>Click Here</Button>
)
}
}
I'm explicitly stating what classes the button is to use. It works, but I have to do that for every element and it keeps the default classes. So I get ui button button-min_ui__14RRq button-min_button__Uio9b
Is there a way of doing this without it keeping the default classes?
I'm not sure I fully understand the question, but will give it a shot. Should you try excluding the semantic/global styles from PostCSS?
eg. If you are using webpack use 'exclude' in the loader definition.
(it's something we do in one of our the projects where I work)
Laura
you are having similar problem to me.
Making External Library(Semantic ui React) and CSS module work with webpack css-loader
From my understanding,you want to exclude semantic-ui-react-library styling from css module so that it work with your application. You can create multiple rules for css loader to resolve this.
Take a look at this Using Semantic UI With CSS Modules in Webpack
I always use css of a library not the components they provide, I write my own.
So install only semantic-ui-css. Now import like below in your react application.
import ReactDOM from 'react-dom'
import 'semantic-ui-css/semantic.min.css'
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))