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}
/>
Related
I have this code
<Button variant="text" disabled sx={{
border: '1px solid black',
'&:disabled': {
color: 'green'
}
}}
>
<Typography sx={{
color: 'red',
'&:disabled': {
color: 'green'
}
}}>Some text</Typography>
</Button>
As you see I try to make disabled button text color "green", but none of this options (in button and in text css) works. How to do it?
p.s. Limitation - I can't use *.css files in this project.
Your code is working but at Typography you assign the color attribute is green when Typography is disabled, not the button so the color green wont be apply!
You may want to remove Typography instead.
<Button variant="text" disabled sx={{
border: '1px solid black',
'&:disabled': {
color: 'green'
}
}}
>
Some text
</Button>
i have this image:
so if you can see i have this image and i have created onMouseEnter and onMouseOut so the red cross appears when i get the mouse inside and disappear when the mouse is outside the image. however, this red cross also is a button and has a functionality and whenever i hover on the button it disappears even though i set the state right. my problem is that the button disappear and i don't want that cz it has functionality:
code.js:
const handleOnMouseHover = () => {
const isToggle = true
setToggleDiv(isToggle)
}
const handleOnMouseOut = () => {
const isToggle = false
setToggleDiv(isToggle)
}
<div>
<h3>preview items</h3>
<div className="image">
<img src={Url} onMouseEnter={handleOnMouseHover} onMouseOut={handleOnMouseOut} />
<div>{photoTitle}</div>
{toggleDiv === true?
<div className="delete" type="button" onClick={() => handleDelete(photoId)}>X</div>
:null}
</div>
</div>
code.css:
.image {
position: relative;
width: 50px;
margin: 0px auto;
}
.image .delete {
background-color: red;
width: 30px;
padding: 10px;
color: white;
display: block;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
}
hope you can help
Try to use the onMouseEnter on the div with class "image" instead of the img itself.
Because when you hover the button then the hover from image is removed and onMouseEnter will not work.
Hope it helps
As I understand you need to move your onMouseEnter onMouseOut to the container of image and button, like that:
<h3>preview items</h3>
<div className="image" onMouseEnter={handleOnMouseHover} onMouseOut={handleOnMouseOut}>
<img src={Url} />
<div>{photoTitle}</div>
{toggleDiv === true?
<div className="delete" type="button" onClick={() => handleDelete(photoId)}>X</div>
:null}
</div>
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 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;
}
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