I have a tag div:
class="ant-upload ant-upload-select ant-upload-select-picture-card"
I tried many ways but can't change the style of tag div.
Thanks for watching!
You can override the default style by adding your custom style. For example, if you want to change the background color, add new CSS class in your custom CSS file as,
.ant-upload.ant-upload-select-picture-card{
background-color: 'red';
}
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
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;
}
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);
}
How can I add general styles to my page inside of one of my components. For example, I when my components loads, I want to add a style like this to whole page:
*{
direction:rtl;
}
and when the component unmounts, I want the style to be removed. I am using css modules for styling.
We can do it using jsx style:
<style jsx="true">
{`
* {
direction:rtl;
}
`}
</style>
How can I style a custom tag with Styled Components?
I want to style an image with AMP HTML which needs an amp-img tag, not a img.
Here is what I would like to do:
const Image = styled.('amp-img')`
filter: blur(2px);`
Thx!
You may refer with this AMP HTML Components documentation.
Styling and theming of AMP-provided components is all done via CSS. See the AMP Spec for more detail.
AMP elements can be styled with class or element selectors using most common CSS properties. Add any styles to an AMP page using a single <style amp-custom> tag in the head of the document. For example:
<style amp-custom>
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
Also from this page, it stated that amp-img can be styled directly via CSS properties. Setting a grey background placeholder for example could be achieved via:
amp-img {
background-color: grey;
}
Hope this helps!
You can't style an amp tag directly via styled components. Instead you can wrap it with a div and style that div.
const Image = styled.div
filter: blur(2px);
<Image><amp-img /></Image>