I am trying to create a const object, which is supposed to be a button with React inline styling, but :hover and :focus doesn't work. How do I implement hover and focus in React?
Any help is appreciated! Thanks in advance.
const Button= {
background: '#AC003B',
color: '#fff',
borderColor: '#AC003B',
&:hover, &:focus {
background: '#707070',
borderColor: '#707070'
}
}
I believe what you want to do is:
const Button = {
background: '#AC003B',
color: '#fff',
borderColor: '#AC003B',
'&:hover, &:focus': {
background: '#707070',
borderColor: '#707070'
}
}
Related
I am trying to change the border color on focus on a textarea component in MUI. I am using styled components:
import "./styles.css";
import { styled } from "#mui/material/styles";
const TextAreaStyle = styled("textarea")(({ theme }) => ({
border: `2px solid #F9FAFB`,
width: "100%",
flexGrow: 1,
boxSizing: "border-box",
borderRadius: 3,
backgroundColor: "#f8f8f8",
// font-size: 16px;
resize: "none",
"&:focus": {
border: `2px solid #454F5B`
},
"&:hover": {
border: `2px solid #F4F6F8`
}
}));
export default function App() {
return (
<div className="App">
<TextAreaStyle />
</div>
);
}
Sandbox: https://codesandbox.io/s/youthful-sammet-qhsfqf?file=/src/App.js
However, while the hover works, the focus does not work. The border color still looks like the default color. Can someone point me in the right direction?
Your code is working, is just that the color you have is too light and similar to the default color. Check it out:
https://codesandbox.io/s/cranky-leakey-mtfutl
EDIT: Updated the sandbox to remove the outline from Chrome
To remove that outline that some browsers have you just have to do
outline: "none"
SECOND EDIT:
for showing the focus border while on hover, just change the order of the styles, with focus last:
"&:hover": {
border: `2px solid #FF0000`
},
"&:focus": {
border: `2px solid #0FF00F`,
outline: "none"
}
I updated the sandbox to reflect that
I want to override the css of MuiButton but only if it's a descendant of MuiDialog.
In css you could do this with:
.MuiDialog-root .MuiButton-root {
border: 5px solid blue;
}
But I can't figure out how to do it in the theme overrides:
theme.overrides = {
MuiDialog: {
root: {
border: "7px solid red",
"& .MuiButton": { border: "5px solid blue" }
}
}
};
This didn't apply the style to the button.
Is it possible to override the style of a MUI button only if it's a descendant of some specified Mui component?
CodeSandbox
The classname in the theme overrides should be & .MuiButton-root
I was able to change the background of button within the dialog. Maybe you didn't use the right className:codesandbox.
MuiDialog: {
root: {
border: "7px solid red",
"& button": { backgroundColor: "blue" } // <- how to target MUIButton when descendent of MUIDialog?
}
}
I added the css hover property to disable the button's hover effect, but it seems not work for my case, how should I fix this?
import Button from 'material-ui/Button'
import styled from 'styled-components'
const StyledButton = styled(Button)`
&:hover {
background: none;
}
`
export const SubmitButton = ({ onClick }) => {
return (
<StyledButton
variant="raised"
onClick={onClick}>
login
</StyledButton>
)
}
You can solve this problem by adding an inline style
export const SubmitButton = ({ onClick }) => {
return (
<StyledButton
variant="raised"
onClick={onClick}
style={{ backgroundColor: 'transparent' }} >
login
</StyledButton>
)
}
Try setting it to the same color as the background:
root = {
backgroundColor: "#FFF"
"&:hover": {
//you want this to be the same as the backgroundColor above
backgroundColor: "#FFF"
}
}
this is solution for v5 if anyone needs it
<IconButton
disableElevation
disableRipple
size="small"
sx={{
ml: 1,
"&.MuiButtonBase-root:hover": {
bgcolor: "transparent"
}
}}
>
</IconButton>
You can try setting the background of the button as none
button: {
'&:hover': {
background: 'none',
},
}
If you used the origin Button component with className instead, you could have added disableRipple to the button like that.
<Button disableRipple>
You can just override it via a styled component:
const StyledButton = styled(Button)`
&:hover {
background-color: transparent;
}
`;
This should work
const StyledButton = styled(Button)`
&&.MuiButton-root {
&:hover {
background: none;
}
}
`
How can I change placeholder text color with React inline styling? I'm using the following input styling:
input: {
width: '100%',
height: '100%',
backgroundColor: 'white',
border: '0px',
float: 'left',
paddingLeft: '30px',
...
}
You can simply target the placeholder text inside the attribute like so:
input::placeholder {
color: white;
}
There is a single space that sits between the selector and className, so I had to do this to achieve.
Please refer to this, https://github.com/FormidableLabs/radium/issues/712
<Style
scopeSelector=""
rules={{
'.textfield-input::placeholder': { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: 'red',
opacity: 1 /* Firefox */
},
'.textfield-input:-ms-input-placeholder': { /* Internet Explorer 10-11 */
color: 'red',
},
'.textfield-input::-ms-input-placeholder': { /* Microsoft Edge */
color: 'red',
}
}}
/>
I'm trying to apply some reasonably simple styles to my <Dialog> component. In this case, I am trying to round the corners with a border radius. Here are some simple inline styles that I'd like to use to override the default <Dialog> styles:
let overrideStyles = {
padding: 0,
margin: 0,
borderRadiusTopLeft: '4px',
borderRadiusTopRight: '4px',
};
<Dialog> provides a wide variety of possibilities for overriding internal styles. These include bodyStyle, contentStyle, style, titleStyle, overlayStyle, and actionsContainerStyle. I decided to try to apply these styles to each one.
<Dialog
bodyStyle={overrideStyles}
contentStyle={overrideStyles}
style={overrideStyles}
titleStyle={overrideStyles}
overlayStyle={overrideStyles}
actionsContainerStyle={overrideStyles}
modal={overrideStyles}
>
<TestPanel/>
</Dialog>
When I render my TestPanel, it ends up looking like this:
Notice the corners, where my border radius has not been applied... I opened up the inspector and noticed the following div:
If I apply the border radius styling to the highlighted div, the dialog will have its corners rounded as expected. Which leads me to my question...
How do I override the styles of Material UI's <Dialog> component to apply rounded corners as my CSS is attempting?
I solved it with paperProps property.
<Dialog PaperProps={{
style: { borderRadius: 2 } }}
> .... </Dialog>
This perfeclty worked for me
You can override styles like below.
const styles = {
root: { }
paper: { borderRadius: 15 }
}
// ...
<Dialog classes={{
root: classes.root,
paper: classes.paper
}}>
</Dialog>
Unfortunately, Material UI isn't supremely style-friendly. In this case, there's no prop you can override to change the border-radius, so we've got to apply our own class:
let headerStyles = {
color: 'white',
textAlign: 'center',
fontSize: 24,
backgroundColor: '#3B8DBC',
padding: 20,
borderTopLeftRadius: 4,
borderTopRightRadius: 4
};
let bodyStyles = {
backgroundColor: 'white',
padding: 10,
height: 200
};
<Dialog className='test'>
<div style={headerStyles}>Testing</div>
<div style={bodyStyles}>5:43pm</div>
</Dialog>
Then style that class, and, yes, the border-radius has to be set on both of the below CSS classes as well as the TestPanel header:
/* Some rules use !important because Material UI sets them by default */
.test > div > div {
background-color: #3B8DBC; /* Same background-color as TestPanel */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.test > div > div > div {
/* Not overriding the color and border radius here too result in your changes
not being visible. */
background-color: inherit !important;
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.test > div > div > div > div {
/* This div is the topmost padding between the modal content and the edge
of the modal */
padding: 0 !important;
}
This ends up looking like what you want:
screenshot here
Hope this helps!
You can override <Dialog /> styles globally in your application when creating your theme object. The paper key of MuiDialog will let you target the border-radius.
const theme = createMuiTheme({
overrides: {
MuiDialog: {
paper: {
borderTopLeftRadius: '4px',
borderTopRightRadius: '4px'
}
}
}
})
Dialog - CSS api
Material UI Theming
The first answer is not working for me. I tried this and it work perfect for me:
sx={{
"& .MuiDialog-container": {
"& .MuiPaper-root": {
width: "100%",
maxWidth: "740px",
borderRadius: "8px"
}
},
}}