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/
Related
Hello I am working on simple crud application in react js 18.0.0. My problem is I have my own styles for one component say eg..Home. But the styles which I have used for other components is also getting applied to Home component even though I did not imported it. Can anyone explain why?
I have attached an image for your reference.
In the above image I was in home component. But if you see the styles the container class in forgetPassword.css and login.css is also getting applied in home component. but In home component I did not imported those two css files(forgetPassword.css and login.css)
Yes this is because by default react does not support css or styles.
you can either use css modules(https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/)
Or
Use styled components.
I suggest you to try the css modules as that will be beginner friendly and easy.
You need to move your css to seperate file and name it [filename].module.css
In your case Home.module.css
Then in your Home.js component import it like import styles from './Home.module.css'
Then in your component use it like
<div className={styles.container} > ... </div>
I also recommend you not to modify the original bootstrap classes, instead create your custom class and add the overrides there.
eg:
<div className={`${styles.container} ${styles.home-container}`} > ... </div>
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 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.
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;
}