I am using Material UI for building my React Project.
However there is a component which has to be embedded to a different site. Meaning, I am providing the production build of this component to embed it to a different site.
My React app's css is getting overridden by the global styles defined in that website.
I don't want this behaviour. Is there any way I can isolate the css of my react app and the global css of the other website.
I saw this question but the solutions didn't help me.
If iframes and Web Components are out of the question, the only remaining option is CSS resets.
Create a CSS class and a series of rules that reset the styles of any elements that occur inside that class.
.my-reset {
/* Global resets (e.g. font family) */
}
.my-reset p {
/* Reset paragraph styles */
}
.my-reset label {
/* Reset label styles */
}
/* etc. */
Apply that class to the root-level component:
function MyApp() {
<div className="my-reset">
{ /* app goes here */ }
</div>
}
There are plenty of CSS reset libraries out there. Since you have no control over global styles, you're going to have to be heavy handed with the resets. So if it's at all possible, make your component embeddable as an iframe.
I see multiple solutions to this problem
Use !important in those styles possible.
Use id to give styling instead of class, as id has higher presidence.
If you give more specific styling to the elements then the build file css will override the outer site's css, i.e like if we write our css like .parent#child this is more specific styling and it will override the wrapper site's css.
Check this out https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
There's another sort of scrappy solution that you could use in the case where you don't need the old table style and the new Material-UI tables on the same HTML page.
If you own the site that you are trying to embed the React app in (i.e., you have control over the new environment's CSS), another thing you could do to reset the CSS styles for the components in your app is to remove the classes that are overwriting your styles.
For example, if you're using Material-UI tables and your existing table styles are affecting the render, you could put the existing table styles into a separate CSS file that you only import when you render your existing tables, on another HTML page.
Related
I am using following css property in my component styling file in NextJs or if i import my main styles.scss file in my any component.styles.scss file it gives same error:
input[type="date"] {
display: block;
/* Solution 1 */
-webkit-appearance: textfield;
-moz-appearance: textfield;
min-height: 1.2em;
}
But it throws following error as show in image:
Error Image
Looking at the logs, the error seems to be coming from confirm-funding.module.scss
By design, CSS modules are scoped CSS classes and you'll need to import them within a JS file and apply them to an HTML element’s className. In your case, you seem to be using a global selector (button) inside confirm-funding.module.scss which is causing the error.
You can either opt-out from CSS modules or use class selector.
Selectors like html, body, button, input etc are global (unscoped) selectors; in addition, they also are not valid scoped classes (like how .exampleClassName is scoped to a div element in the example above). Next expects CSS modules to be pure in that they don’t produce side effects (like altering the body style based upon a page being loaded or a particular component being loaded -- in the example above, the body is outside of the component-level scope). The reason pure stylesheets are enforced/encouraged is because they allow CSS to be split chunked (when you land on a page, you only download the styles necessary to view that particular page, instead of downloading everything at once).
More details on css modules
So the component lib has a dark theme.
I would like to use dark style only for a single component, say a Popover. All the rest sd remain default.
Is there a way to achieve that?
you could use less reference import feature for theming single component. Sudo code would be something like
#import (reference) "#ant-design/dark-theme"
.my-popover {
&:extend(#popover-prefix-cls all);
}
you can find the class name #popover-prefix-cls by going into individual components styles file and checking the class
References: https://css-tricks.com/reference-imports-in-less-are-kinda-cool/
using the method described at https://fontawesome.com/how-to-use/on-the-web/using-with/sass I believe I will end up accumulating almost 2.8MB of web fonts in the src folder of my React project. I need to use CSS to add icons to a calendar style, but won't that affect tree shaking? In other words, won't I end up with a huge package size just for using a single icon?
The method #Mike Poole presented is the most correct one for tree shaking. If you use the webfont method, you have no option but to load the entire set. But if you need to use just a few icons, and can't load 'em via js for some reason, you can simply get the svg files you need and add them directly, as either <img> tags or background-images.
Tree shaking using FontAwesome is straightforwards. If you only use a single icon then you only need to import that icon (and certainly don't need to use SASS to do so).
Here is the example that FontAwesome use if you only want to use the solid fa-coffee icon:
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
I'm using the provided components and every time I need to change a component style I wonder what's the proper way to do it.
Lets say I need to change the IconButton background color when it's disabled.
https://codepen.io/elsl/pen/KrQQdV
If I provide a theme, how am I supposed to know which palette/semanticColor is used by that component?
const iconsTheme = Fabric.createTheme({
semanticColors: {
disabledBackground: "#ff9933"
}
});
<Fabric.IconButton
iconProps={{iconName:'ChevronRight'}}
disabled
theme={iconsTheme}
/>
If I provide an IButtonStyles, how am I supposed to know that the property name is "rootDisabled.backgroundColor"?
const iconButtonStyles: IButtonStyles = {
rootDisabled: {
backgroundColor: "#ff0000",
}
};
<Fabric.IconButton
iconProps={{iconName:'CalculatorEqualTo'}}
disabled
styles={iconButtonStyles}
/>
For both these options, I had to dig into the component's source code on github to find out.
Is this the expected/correct way?
If so, between creating a Theme or an IStyle which would be the ideal/best practice?
Theme vs IStyles
I would say, use a Theme if you want all Fabric components to have the same customization.
Use the styles property if you just want to customize that specific component (or that one specific instance of the component).
How to discover the styling hooks if using IStyles
There are four ways that comes to mind.
Look at the documentation (e.g. https://developer.microsoft.com/en-us/fabric#/components/dropdown, look at the IDropdownStyles interface)
(screenshot)
Utilize IntelliSense if you're using an editor like Visual Studio Code, which automatically enumerates the IComponentStyles and provides documentation if any.
Inspecting the DOM often provides hints (the hook areas usually look like {area}-{number} so root-33 for instance where the "area" name is root.
Read the source code.
Unfortunately for option 1 and option 2, Fabric React isn't super consistent with the IComponentStyles documentation so not all components have equally descriptive comments and in those cases, you may need to fallback to option 3 and option 4.
I am using StyledComponents in a React project, and I'm planning to overwriting the styles in Airbnb's react-dates library. They are using a CSS file with classes, but I want to overwrite their CSS using a wrapper component through StyledComponents (to keep my project consistent with not using CSS files).
Is this possible? I'm not finding anything on it.
Try to be as specific as possible and if necessary add the !important flag.
For example:
#TheID .theClassName .otherDIV .someDIV .divDIV .divitisDIV {
color: purple!important;
}