Hello Every body i'm using material table but i'm facing a styling issue which is the search fields not aligned like here
Layout view
and i don't know how to do it,
Any Clues ? Thanks In Advance.
there is a prop for styling search box that we can pass in options props like below in given code block
<MaterialTable
options={{
emptyRowsWhenPaging: false,
searchFieldStyle: {
padding: "5px 10px 5px 15px",
borderRadius: "9px",
fontWeight: 450,
disableUnderline: true,
border: "1px solid #707070",
}
}}
/>
Related
I am trying to do MUI table which will have sticky headers when scrolling verticaly and also sticky first column when scrolling horizontally, but keep getting results as in demo:
demo.
I triead many styles but keep getting stuck with it :(
For sticky column you can create another style stickyHeader, add zIndex property and set to tablecell
stickyHeader: {
position: "sticky",
left: 0,
background: "white",
boxShadow: "5px 2px 5px grey",
borderRight: "2px solid black",
zIndex: "9999 !important"
}
<TableCell className={classes.stickyHeader}>
Dessert (100g serving)
</TableCell>
Also add maxHeight in TableContainer style for scrolling as added in mui table example.
<TableContainer style={{ maxWidth: 400, maxHeight: 200, border: "1px solid black" }}>
Working example
I am trying to add a border color to a styled component using MUI:
const Style = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
borderColor: theme.palette.success.main,
border: 10,
borderTop: 10,
width: INFO_WIDTH
}));
However, I don't see any change in the effect:
Screenshot of browser
I'm trying to follow the guidelines specified by MUI but it's not working. Does anyone know a workaround?
The guidelines you linked to are for the sx prop (or lower-level usage of #mui/system) -- not the styled API. One key difference between the two is that for the sx prop, a numeric border value is treated as a shorthand for ${value}px solid. The styled API does not automatically add solid, so border: 10 just becomes border: 10px which is not sufficient for causing a border to be displayed.
A separate issue with your example is that you specify borderColor before border. Since border is a shorthand for border-width, border-style, and border-color, even when you don't specify a color with the border value, a previously specified border-color will be overridden with the default.
Below is an example showing the correct syntax for specifying the border for both sx and styled:
import * as React from "react";
import Box from "#mui/material/Box";
import { styled } from "#mui/material/styles";
const StyledDiv = styled("div")(({ theme }) => ({
border: "10px solid",
borderColor: theme.palette.success.main,
width: "5rem",
height: "5rem",
margin: theme.spacing(1)
}));
export default function BorderSubtractive() {
return (
<Box sx={{ display: "flex", justifyContent: "center" }}>
<Box
sx={{
border: 10,
borderColor: "success.main",
width: "5rem",
height: "5rem",
m: 1
}}
/>
<StyledDiv />
</Box>
);
}
I have used a react-select for multiselect. Now I want to style it but not getting it.
const selectStyles = {
control: (base) => ({
...base,
fontSize: '16px',
fontWeight: 'bold',
borderRadius: '8px',
padding: '6px 5px',
border: '1px solid #21274F !important',
boxShadow: 'none',
'&:focus': {
border: '0 !important',
},
}),
}
<Select
placeholder='Type Team Name...'
value={getOptions(value)}
options={getOptions(data)}
onChange={(data) => setValue(data || [])}
styles={selectStyles}
isMulti
isClearable
isSearchable
/>
Its looking like this. I want to change the background-color to blue and text = white. How can I achieve this? please help.
EDIT: After applied #Manish Jangir code. It looking like this.
But I want the text ie. 'leadership' to appear white in color and on hover the appering red color on cross to be removed.
There are a lot of custom custom components to style the entire select. Have a look at this. You need to use multiValue component to style to change the styles of a single tag:
const selectStyles = {
control: (base) => ({
...base,
fontSize: '16px',
fontWeight: 'bold',
borderRadius: '8px',
padding: '6px 5px',
border: '1px solid #21274F !important',
boxShadow: 'none',
'&:focus': {
border: '0 !important',
},
}),
multiValue: (base) => ({
...base,
backgroundColor: 'blue',
color: 'white',
}),
}
It's been a while, but adding this here for who would have the same problem and wants to tackle it with custom components and custom styling.
I had the similar issue as well. Creating custom component like in docs and wrapping it around components.Option didn't give me the desired result in terms of styling.
After digging through, I found an example in react.select issues. So instead of creating custom component that wraps components.Option, you can now create your own component and pass in the props as you needed. This would also allow you to style the component with classes easily (in my case, it was Tailwind).
I'm using React material-ui SelectField on my page. I'm not able to adjust the height of the select field. Here is my code snippet:
<SelectField
underlineStyle={{
display: 'none'
}}
style={{
width: '49%',
padding: '0 0 5em 5em',
border: '1px solid #ccc',
borderRadius: '5px',
backgroundColor: '#fff',
margin: '16px 0px 0px 28px',
}}
floatingLabelText="Select Stack*"
value={this.state.stack}
onChange={this.handleStackChange.bind(this)}
>
{this.state.dropDownStack}
</SelectField>
My UI is looking as below
I need to reduce the height of dropdown box, how can I do it?
You have to set it using following:
<SelectField
className="custom-selectfield"
underlineStyle={{
visibility: 'hidden',
}}
floatingLabelStyle={{
top: '14px',
}}
style={{
border: '1px solid #ccc',
height: '45px',
}}
floatingLabelText="Select Stack*"
value={this.state.stack}
onChange={this.handleStackChange.bind(this)}>
{this.state.dropDownStack}
</SelectField>
There is some internal CSS applied in material UI so in order to overwrite it added a custom class to SelectPicker component named custom-selectfield
Add following lines in your CSS file
.custom-selectfield > div:nth-child(2) {
margin-top: -6px !important;
}
I am using Material UI Snackbar. I am not very new to Material UI but somehow I am unable to resolve the issue i.e., the snackbar is overlapping when it appears on top of the screen. I tried different ways to fix it but no luck.
Please find below Snackbar component and its body style. Also please find this screenshot:
bodyStyle:{
border: "2px solid #ffffff",
minWidth: '50%',
maxWidth: '100%',
flexGrow: 0,
height:'55px',
backgroundColor: 'transparent',
fontFamily: "Open Sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif",
fontStyle: 'normal',
fontWeight: 400,
fontSize: 16
}
snackbarfromTop: {
top: 0,
color: white,
bottom: 'auto',
}
<Snackbar
open={this.state.open}
message={this.state.error}
autoHideDuration={4000}
bodyStyle={myTheme.bodyStyle}
action="Close"
onRequestClose={this.handleRequestClose}
onActionTouchTap={this.handleRequestClose}
style={myTheme.snackbarfromTop}
/>
I had this problem using react and Material UI, when two snackbars where introduced, one was overlapping each other. I solved modifying the second child of the mui root snackbar in index.css
#root .MuiSnackbar-anchorOriginBottomCenter:nth-child(2){
bottom: 92px!important;
}
It obviously depends upon which position you choose for the snackbar, and tweak accordingly
From the screenshot alone, I can't tell 100%, but it seems you have just made your Snackbar transparent with:
backgroundColor: 'transparent'
So you are actually seeing through it.
To fix this, you should specify a backgroundColor to your component, or remove the 'transparent' override, such as:
backgroundColor: '#bada55'
You might want to look at the withStyles/withTheme HOC in order to declare your colors in one place and reuse them in different components, in which case you'll have something like this:
backgroundColor: theme.palette.my.predefined.color