I'm trying to change SpeedDial color in material-ui. But I can only change three color "default", "primary", and "secondary" using FabProps.
<SpeedDial
ariaLabel="SpeedDial openIcon example"
className={st.speedDial}
FabProps={{
color: "secondary",
}}
></SpeedDial>
How can I change SpeedDial color using by Hex-color(like "#F19920")??
You can do this in several ways.
You can add custom classes to the component using classes={{}} prop.
Here are the classes you can pass to the component. And here is an example of those classes being used to change your color, on line 26 I add the className, and on line 64 I use it.
Another way is you can overwrite the pallet in your theme object, docs. This way you can use color="primary" and it will use the color that you specified in the pallet.
Related
Problem Description
I have changed the theme color by using <ConfigProvider prefixCls="custom">
ConfigProvider.config({
prefixCls: 'custom',
theme: {
primaryColor: '#1d2958',
},
});
However, antd will help me automatically generat a kind of "secondary color" like shown below.
I want to change this color because it is really not approprarite for my use case.
Many other components will also use this auto generated "secondary color" , you can find all here.
I am implementing this chart using antd chart:
https://charts.ant.design/en/examples/column/percent#basic.
I need to change the colors. How do I change each of the 3 colors within the bar?
It's very easy, just add a color configuration -
color: ['#d62728', '#2ca02c', '#000000'],
You can add as many colors. Order is preserved from top to bottom. A single color would mean all stacks would have the same color. You can also return a function with additional logic -
color: ({ type }) => {
if(type === 'some condition'){
return '#2ca02c';
}
return '#d62728';
}
I want all users see scrollbars as its in dark mode of chrome;
But some users dont use dark theme in chrome so I set colorSchema:"dark" of parent div style and it looks like pic below;
Why its diffirent from origin dark style? how to use the schema with strong dark?(first pic)
I know there is custom css solution to change scrollbar css. its ok, but I am using reactjs, is it possible to style scroll bar in react component file?
const PARENTDIV: React.CSSProperties = {
backgroundColor: color.quizBackground,
flex: 1,
colorScheme: 'dark',
}
I have the following configuration in the antd.customize.less file:
#btn-primary-bg: #ffe900;
#btn-primary-color: #primary-color;
#btn-default-color: #primary-color;
#btn-default-bg: #ffffff;
On hovering a primary button everything is ok, but on hovering a default button the text color in the button changes to #btn-primary-bg, which I want to override, but I couldn't find any property like "#btn-default-hover-color" here. How can this be overridden, if at all?
I faced the same issue but I'm still looking for a better solution. However, for the moment, I can suggest that you add something like this to your global style file:
.ant-btn-default:hover, .ant-btn-default:focus {
border-color: #bee2e5;
color: #fff;
}
UPDATE
After antd has been updated to version 5.0.0 there is a prettier way to do it using ConfigProvider.
Let's suppose we have wrapped our App and assigned to the theme an object with parameters.
<ConfigProvider theme={{
components: {
Button: {
colorPrimaryBorderHover: 'red',
colorPrimaryHover: 'lightgray',
colorPrimary: 'red',
colorPrimaryActive: 'lightgray',
colorPrimaryTextHover: 'lightgray',
}
}
}}>
<App />
</ConfigProvider>
Acctually there are a lot of parameters to customize the appereance of your app which you can find in your
node_modules/antd/es/config-provider/context.d.ts file
However your config might be huge but to keep your code readable you might pass this object with interface of ThemeConfig as an exported value from another .ts file.
<ConfigProvider theme={myCustomTheme}>
...
Working with reassigning less variables. Thied to edit everything that connected with #primary-color, nothing changed color generated by Antd for hover/active state. Looks like there is no way to do this with less variables.
I can't seem to find in any of the Material-UI documentation where the "light", "dark" and "contrastText" properties of a PaletteIntention are applied or what they are used for? I know I can access them with hooks or HOC directly, but I am wondering if those variants are used in any of the built-in components automatically? This is probably obvious, so thanks in advance.
Yes, those theme values are used in MUI components.
The keyword PaletteIntention has only appeared in the document theme/palette/customization for explanation.
What it wants to say is that we can customize the theme default settings.
If we take a close look at the built-in component source like the most common one Button
Refer: the source of MUI Button
You can find that the default styles are using the theme
export const styles = (theme) => ({
/* Styles applied to the root element. */
root: {
...theme.typography.button,
boxSizing: 'border-box',
minWidth: 64,
padding: '6px 16px',
borderRadius: theme.shape.borderRadius,
color: theme.palette.text.primary,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
duration: theme.transitions.duration.short,
}),
Which is quite common. I mean, why not they use the style solution inside their own package?
The document may not list all the default style one component is using, still, we can see it inside the source, and we can always customize them via the CSS API document, or override them using the MUI nesting selector or other style solution provided by MUI with theme.
Refer: document of
MUI style solutions
MUI theming
customizing-components
advanced/#theming