There seems to be an automatic greying of the original button color when applying "disabled" to <Button>. I want to change the color completely.
Current button:
<Button disabled>{example}</Button>
Current styling that is not overwriting the greying:
.labels .button{
background-color: #6363FA;
margin: 10px;
color: #F2F1F7;
}
Hoping to be able to apply a new background-color for disabled somewhere
From my experience, here's one good way you can restyle a Button like that
(Follow the guide here: https://react.semantic-ui.com/theming/#theming-with-create-react-app first if you haven't setup theming!!)
Go and edit some-location/semantic-ui/site/elements/button.overrides, add a class like .ui.huge.disabled.button for a <Button /> with properties size='huge' disabled
sample button disabled css class
Which will result in something like this:
button screenshot
By the way, I found that class name above by inspecting it in the browser:
css class in inspector
I hope this is clear! If you have any questions, let me know :)
PS: Sorry didn't have enough rep to embed images...
EDIT: Forgot to mention, in the CSS example above, #gold and #black are custom colors I added into semantic-ui/site/globals/site.variables
I found a simpler way. I'm using Semantic UI React - not sure if that matters.
I have a css class for the button:
.main-app .landing-page .quick-search {
background-color: #41B3A3;
color: rgba(255,255,255,0.9);
}
and I add one like this and it works to respond to the disabled property
.main-app .landing-page .quick-search:disabled {
background-color: #f5f7f6;
color: rgba(56, 143, 89, 0.9);
}
Related
i need to override the default blue (primary color) on Antd Switch Component when checked and change it to red color. is there a way i can do this?
i have tried using style attribute but it didnt work.
You can change the backgroundColor using inline styles like this.
<Switch style={{backgroundColor: permission.enabled ? 'green' : 'orange'}}
checked={permission.enabled}
checkedChildren={'ENABLED'}
unCheckedChildren={'DISABLED'}
onChange={(e) => onPermissionChanged(e, permission)} />
You can override the .ant-switch-checked class like so
.ant-switch-checked {
background-color: red;
}
you can change switch styling by overriding default class (you will get all the element classes from developer tool) for switch class
.ant-switch-checked{
background:#fdfdfd !important;
}
as a result it will override the color globally, to override the color for specific element only just wrap the element in some div by giving class "test" and override the css like
.test .ant-switch-checked{
background:#fdfdfd !important;
}
and it will update the color for specific elemet only.
In your main/themefile, you can just override the variable like so:
#switch-color: red; // #primary-color
or
#switch-bg: red; // #component-background;
You can actually override any variables to your use: reference
In my React form I am using Formik, Yup and Material ui form and textfield:
import { TextField } from '#material-ui/core';
for my E-mail form.
When I blur out the field it's generating the following HTML:
<p class="MuiFormHelperText-root MuiFormHelperText-contained Mui-error">This field is required.</p>
How do I add an svg icon to this helper text?
For example a React component <HelperText icon={MyIcon} />, is that possible?
You can add the svg with css class from the global styles.css file, it is not a best practice but it's a nice workaround if there is no other solution for this situation.
Similarly easy to using SVG as an img, you can use it in CSS as a background-image.
for example:
.MuiFormHelperText-root MuiFormHelperText-contained Mui-error {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(example.svg);
background-size: 100px 82px;
}
Notice we set the background-size to the size of the logo element. We have to do that otherwise we’ll just see a bit of the upper left of our much larger original SVG image. These numbers are aspect-ratio aware of the original size. But you could use a background-size keywords like contain if you want to make sure the image will fit and can’t know the parent image will be of the exact right size.
Inside my react-router-dom Link, I have an icon. Whenever this icon is clicked, it turns red. How can I prevent this?
Gif showing the problem
That color comes from default css for html a elements.
You just need to override the css color of the link.
Simple example:
.my-link {
color: inherit;
}
I am currently trying to learn NextJS and I've decided to go with a simple weather api that collects data from given city. I've learnt some new stuff and I really like it so far. There is however one issue that I can't seem to solve and that would be adding a class with styling.
Now... Given the GIF below, you can see it DOES add the class when location is being typed but the styling does not change.
https://gyazo.com/55be0759cc8cc514905a7a661274f73c
The 'Home_main__1Z1aG' should change its height and font-size when I add the class but it doesnt. I've never experienced this before and I've made sure that I am targeting the correct div.
I use state to add the class to the 'Home_main__1Z1aG' div.
<main className={`${styles.main} ${searchedCity ? 'loc_set' : ''}`}>
<input value={searchedCity} placeholder="City, Country" className={styles.title} onChange={e => setSearchedCity(e.target.value)} />
</main>
My styling:
.loc_set {
height: 10vh;
.title {
font-size: 2.2rem;
}
}
One important thing to mention is that I've added SCSS to my project.
I think that I need to somehow render the whole div since it is serverside rendered, but am I thinking wrong or? I've basically tried moving my styling around to make sure nesting wasnt an issue, I've made sure that the class is correctly named etc..
Components in Next.js use CSS modules. Assuming that the HTML you've provided is in a component and not a page, you'll have to reference it using imports.
<main className={`${styles.main} ${searchedCity ? styles.locSet : ''}`}>
<input value={searchedCity} placeholder="City, Country" className={styles.title} onChange={e => setSearchedCity(e.target.value)} />
</main>
I am not sure if _ would work, so maybe change that to a hyphenated classname.
.loc-set {
height: 10vh;
.title {
font-size: 2.2rem;
}
}
You have to use ampersand:
.loc_set {
height: 10vh;
& .title {
font-size: 2.2rem;
}
}
How can I access to inner css classes of children of a component and add or change styles to/of them? like I want to change and customize material ui stepper steps circle font size and color and so on.
How can I write css classes like bellow:
.stepper circle {
font-size:18px;
}
or
.stepper .text {
font-size:18px;
}
thanks.
Thanks to #spakmad's answer, but that's not exactly what I meant, maybe my question was not clear enough. I meant how to write above mentioned CSSs in material ui object style classes format(classes injected with withStyle HOC).
I found my solution:
stepper:{
'& circle':{
fontSize: '18px'
}
}
and
stepper: {
'& .text': {
fontSize: '18px'
}
}
The very straightforward way to do it without having to worry about classes is by using the material-ui style prop. Like so,
<Stepper style={{ fontSize: '18px' }} />
This applies a style to the root element, which I assume to be a div or container of sorts, although it probably varies by the component.
More specifically, and what you probably want to do is use material-ui classes prop. That is, since you know exactly what classes you want to override, you can do so as follows,
<Stepper classes={{ text: { fontSize: '18px' }}} />
I use text here as a classname because in the question, .text appears to reference and already existing class. Since you're trying to increase the size of the font in this svg that comes with the Stepper. You'll need to get the class name applied to the svg and override it. In this case, one of its classnames is MuiSvgIcon-root-184 so you would expect to be able to do,
<Stepper classes={{ MuiSvgIcon-root-184: { fontSize: '18px' }}} />
This classname however is generated by material-ui dynamically based on the layout resulting from props and could be different across all renders.
TLDR
So, trusty className component and writing some css and component JSX as follows.
<Stepper className={'customStepper'} />
.customStepper svg: {
font-size: '18px !important',
}
You need to include !important to make sure this style is respected. Material UI by default puts its styles last in the document so they're normally overwriting anything else, but the !important spec should override the override.