I'm working on an app with react, material-ui. I'm trying to add border to a div but failed. Following is my code
<div className={classes.search}>
...
</div>
search: {
...
borderWidth: '2px',
borderColor: theme.palette.primary.main,
},
I check in chrome and it shows my border parameter is identified by chrome as 2px, but chrome use 0px instead of 2px as final border width. Any ideas on how it happened?
Seems like you missed to set borderStyle.
You can set the border style with Material-UI theme like the following.
const useStyles = makeStyles((theme) => ({
search: {
border: `2px solid ${theme.palette.primary.main}`
}
});
Related
i'm using react-big-calendar and want to change the color of borders of all calendar but doesnt find how to do in the documentation, someone know how to do this styling?
Already tried in the dayPropGetter but doesnt work well, looks like have some space between the days:
i'm using this code in the style of dayPropGetter:
const borderStyle = () => {
return({
style: {
border: '1px solid',
margin: 0,
padding: 0
},
})}
and want to replace all the borders in the calendar. Someone can help?
I'm using Material UI Tabs in React to implement curved tabs (imagine like ones shown in Google Chrome). The structure must be such that the parent can give a bottom border which should stretch across the entire row making this bottom-border appear on tabs as well as on some other content on right. The selected (or active) tab, however, must remove the bottom border applied on it by its parent.
Expected Result:
Current Result:
The border from parent gets applied over the selected tab too, which is not what I want.
Here's the CodeSandbox link for my code.
Approach Taken:
I tried creating an ::after pseudo-element positioned absolute for selected tab with higher z-index. This pseudo-element creates a white-colored horizontal line and patches it over the bottom border applied by parent to overlap parent's border. However, I could not make it work. There were a couple of other CSS changes I applied; none seemed to move the parent's border. Any help to correct the existing approach I'm taking or suggesting a new approach to get the desired result is appreciated.
(Please note that I want to keep using Material UI Tabs as the base.)
On a side note, could anyone help why there's also some lag when selecting a tab?
Here is a way you can get your desired effect. Remove the parent bottom border, add a new css selector so you can give tabs that arent .MuiSelected a bottom border, then give the someother content div a bottom border so the grey line continues for the full length of the page (the grey is a slightly different shade cause of mui, but you could specifically set it to the right color):
https://codesandbox.io/s/curvy-tabs-using-material-ui-forked-lx57sw?file=/src/App.js
subtabs
import styled from "#emotion/styled";
import MuiTabs from "#material-ui/core/Tabs";
export const StyledSubTabs = styled(MuiTabs)`
.MuiButtonBase-root.MuiTab-root {
background: white;
border-radius: 8px 8px 0 0;
:hover {
background: pink;
}
}
.MuiButtonBase-root.MuiTab-root.Mui-selected {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
border-bottom: none; /* not working */
z-index: 10;
:hover {
background-color: pink;
}
}
//
//added this
//
.MuiButtonBase-root.MuiTab-root {
border-bottom: 3px solid gray;
z-index: 10;
:hover {
background-color: pink;
}
}
.MuiTabs-indicator {
display: none;
}
`;
app.js
import React, { useState } from "react";
import Tab from "#material-ui/core/Tab";
import { StyledSubTabs } from "./SubTabs.styles";
const App = () => {
const [index, setIndex] = useState(0);
const handleChange = (event, newIndex) => {
console.log("SubTab - index", newIndex, event);
setIndex(newIndex);
};
const parentStyles = {
// remove this ----> borderBottom: "3px solid gray",
display: "flex",
justifyContent: "space-between",
alignItems: "center"
};
return (
<div style={parentStyles}>
<StyledSubTabs value={index} onChange={handleChange}>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</StyledSubTabs>
<div
//added this
style={{
borderBottom: "3px solid gray",
height: 45,
flexGrow: 1
}}
>
Some Other Content
</div>
</div>
);
};
export default App;
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 am creating a React component using an existing component library that uses styled component. I time to time need to override the style from the parent library and use my own. Here is a TextInput component from the library that has style,
border: 2px solid black;
while using this component I don't want to have the border around the input box. Instead, I just want one underline.
I did it two ways,
Using style props,
<TextInput
name="test-input"
value={testInput}
onChange={onInputChange}
style={{borderTop: 'none',borderRight: 'none',
borderLeft:'none', borderBottom: '2px solid black'}}
/>
By this I get a black border-bottom but it requires me to repeat for all other three. Is there a better way so that I can write one line and that solves my issue ?
I created a styled component based on the existing component,
const TextInputStyled = styled(TextInput)`
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid black`;
And here my component with the above style.
<TextInputStyled
name="test-input"
value={testInput}
onChange={onInputChange}
/>
In this case I get the border-bottom with 2px black but the other border also exist and this is also a repetition.
Is there a better to do this ? I often need to twitch the style of the parent component.
Any help is very much appreciated.
why don't you try this code:
<TextInput
name="test-input"
value={testInput}
onChange={onInputChange}
style={{border:'unset', borderBottom: '2px solid black'}}
/>
Update:
If you insist on using styled component, ThemeProvider is the solution:
const TextInput=styled.input `
border: 2px solid black;
border-bottom: ${props => props.theme.borderBottom};
border-top:${props => props.theme.borderTop};
border-left:${props => props.theme.borderLeft};
border-right:${props => props.theme.borderRight};
`;
\\Define what props.theme will look like
const theme= {
borderTop: 'none;',
borderRight: 'none;',
borderLeft: 'none;',
borderBottom: '1px solid black;'
}
return(<>
\\normal TextInput with border
<TextInput
name="test-input"
/>
\\customized TextInput without border except underline
<ThemeProvider theme={theme}>
<TextInput
name="test-input"
/>
</ThemeProvider>
</>
)
If you don't know about ThemeProvider read this article:
https://styled-components.com/docs/advanced
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"
}
},
}}