I try to set border to FloatingActionButton,
Which props should I use to set border.
iconStyle does not work.
https://codepen.io/palaniichukdmytro/pen/NgQmve
Also how to disabled hover effect,
overlayWhenHovered: {
backgroundColor: fade(iconColor, 0.4),
},
I could get border done with className
<FloatingActionButton className="floating">
<ContentAdd />
</FloatingActionButton>
In my css file,
.floating {
border: 1px solid;
}
Related
I have an image gallery where I want to select image and style selected one with green border. :hover works fine but :focus and :active are not applying to my img element. As soon as move mouse from the image my green borde goes away, but I want it to stay on selected image
Styles:
image: {
'&:hover': {
border: '1px solid green'
},
'&:active': {
border: '1px solid green'
},
'&:focus': {
border: '1px solid green'
},
Image that comes from map(Array...)
<img
className={classes.image}
alt='My image'
src={img}
onDoubleClick={() => this.openImage}
/>
You can modify your img element to be able to receive focus by adding the tabindex (tabIndex in React) property. A tabindex of -1 lets you focus an element using the mouse, though not using the tab key.
<img
className={classes.image}
alt='My image'
src={img}
onDoubleClick={() => this.openImage}
tabIndex={-1}
/>
I use a Tabs with some TabPane in my code but the text stay always in Blue, I want to change it to grey.
I try several things but none fuction.
I try:
this for apply the text color with the parent:
<Tabs style={{ height: "fit-content",font: "#363636" }} >
and
<Tabs style={{ height: "fit-content",color: "#363636" }} >
this for each the children :
<TabPane tab={t("tabPanelGeneral/name")} key="1" style={{ color: "#363636" }}>
and
<TabPane tab={t("tabPanelGeneral/name")} key="1" style={{ font: "#363636" }}>
Putting it here if someone still needs it
You can use tabBarStyle prop to add custom css. source
To change the color of the active tab, You need to update color of the button:
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: #363636 !important;
font-weight: 500;
}
To change the color of the blue bottom bar:
.ant-tabs-ink-bar {
position: absolute;
background: #000000;
pointer-events: none;
}
if you change the color of the tab text then put CSS like this
demo codesandbox link you view demo
.ant-tabs-tab {
color: #363636 !important;
}
.ant-tabs-tab-active {
color: #363636 !important;
}
You can set
.ant-tabs-ink-bar {
background: none;
}
And use a custom-tab
.custom-tab{
height : fit-content;
color:#363636;
}
You can apply css for your active tab.
.ant-tabs-nav .ant-tabs-tab-active {
color: '#363636';
}
you simply can add classNames to your components and add their styles on your style sheet :
<Tabs className="custom-tab" >
and the style sheet :
.custom-tab{
height : fit-content;
color:#363636;
}
I'm using React-bootstrap to make a progress bar. Easy enough, it works:
<ProgressBar className="progress" striped now={this.state.now}
label={this.state.progress + "/" + this.state.total}/>
But the label text is white. I referenced the link above and search through their short docs, but couldn't find the option. Is it possible to change the label's color?
One approach is to assign a variant property, for example in React you can do the following:
<ProgressBar now={score} variant="SOME_NAME" />
Write the CSS class like so:
.bg-SOME_NAME{
background-color: #123445!important;
}
React Bootstrap components allow for custom variants, in your css you can define something like
{`
.progress-custom {
background-color: purple;
color: white;
}
`}
And then you can use it like:
<ProgressBar variant="custom" />
You can read more about custom variants here.
The following worked for me. In addition to changing the color of the bar, I wanted to not have a border radius.
I set the following global styles in my styles file.
`
// this is for the bar container
background: #F8F8F8;
border: 0px solid rgba(255, 255, 255, 1);
border-radius: 0px;
height: 16px;
.progress-bar { // this is for the bar itself
background-color: #4AA69F;
}
`
And I didn't change anything with the code. Yes, it did work.
const now = 25
const ProgressInstance = () => <ProgressBar now={now} />
I have Item components that take an itemId and itemBeingEdited as props. If these two are equal (i.e. the current Item is indeed the one that is being edited), that Item's border should be 5px solid red. If they are not equal, that Item's border should be 2px solid black. While it looks like the equalities are being correctly evaluated (from console.logs), styled-components is treating them both as though they evaluate to TRUE
Working demo: https://codesandbox.io/s/styled-components-props-border-s9p47
Expected: first div should have a 2px solid black border, second div should have a 5px solid red border.
Actual: both divs have the red border.
You have to pass props to <ItemWrapper {...props} /> explicitly.
const Item = props => {
console.log(props.itemId === props.itemBeingEdited);
return <ItemWrapper {...props} />;
};
Demo: https://codesandbox.io/s/styled-components-props-border-0ettv
About this React component library.
https://github.com/stripe/react-stripe-elements
How can I put border styling with input component?
<CardElement style={{
base: {
fontSize: '18px',
border: '1px solid red' // it is not work.
}
}} />
but, seems they didn't provide custom style interface, though.
https://stripe.com/docs/elements/reference#element-options\
Anyone know?
Update:
following are sample code that using StripeElement class to apply custom styling.
.StripeElement {
border: 1px solid #eee;
}
.StripeElement--invalid {
border: 1px solid red;
}
Great question! As noted here, to apply padding or a border to a Stripe element you want to style the parent DOM node that contains the element, not the element itself:
https://stripe.com/docs/elements/reference#the-element-container
I'd wrap your CardElement in a div and then apply styling to that. As noted above, Elements automatically applies the StripeElement class to the parent element, as well as complete/empty/focus/invalid states.
The simplest solution is:
<div
style={
{
border: '2px solid red'
}
}
>
</div>
I was trying to add padding, and the wrapper div did not work for me. However, they added a change to react-stripe-elements to allow for a className on the card element. That worked for me:
In my css:
.card-element {
padding: 11.4px 12px;
}
For my CardElement:
<CardElement style={style} className="card-element" />
You still have to use inline styling for the attributes that are in the element options styles: https://stripe.com/docs/stripe-js/reference#element-options
In the docs there is a reference to an options prop which you can add to the CardElement component:
const cardElementOptions = {
style: {
base: {
color: "#666",
fontSize: "20px",
},
invalid: {
color: "#fa755a",
fontSize: "20px",
}
}
}
return (
<form onSubmit={handleOnSubmit}>
<CardElement options={cardElementOptions} />
<button type="submit">Submit</button>
</form>
)
See also https://stripe.com/docs/js/appendix/style