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
Related
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 am using npm module powerbi-report-component in my react application. I need to change background color and colors of the text in the report.
const reportStyle = {
width: '350px',
height: '660px',
color: 'red !important',
border: '0',
padding: '0px',
background: '#33444C',
bgColor: '#33444C',
};
I am sending this reportStyles to report module..but they are not applied to the component. Can anyone please help me with this.
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",
}
}}
/>
I've read the docs many times over and still don't fully understand how to style the React slider via inline CSS (https://github.com/react-component/slider).
I see that you need to pass a handle props to the slider with the css and some kind of component with offset and value props. When I try to do this, my CSS comes back horrible with the knobs not moving and the slider being all over the place. Regular styling doesn't work on the slider.
This is how my component that I pass on to the slider component looks like:
import React from "react";
export default class SliderStyle extends React.Component {
render(){
let style = {
position: "absolute",
left: "0",
height: "15px",
borderRadius: "8px",
backgroundColor: "#000"
};
let tracker = {
position: "absolute",
marginLeft: "-7px",
marginTop: "-5px",
width: "14px",
height: "14px",
cursor: "pointer",
borderRadius: "50%",
border: "solid 2px #000",
backgroundColor: "#fff"
}
return(
<div style={style}><div style={tracker}></div></div>
)
}
}
Then in the main component:
<Slider range allowCross={false} handle={<SliderStyle/>} value={this.state.range} onChange={this.onSliderChange.bind(this)}/>
I'm assuming the div I return from the component that I pass into the Slider component is the actual slider, and the div inside the first one is what will be the knob. The colors change, but the slider knob doesn't move when values change.
Is there something I'm not getting here?
Looking at the example given by slider about creating a custom handle - http://react-component.github.io/slider/?path=/story/rc-slider--slider - first I'd like to explain the handle object. This will only be replacing the handle in your slider.. what I think you refer to as the "knob". This does not change the styling of the entire slider (you should use Slider's className prop to change the non-handle slider styles).
Also, you need to learn about the offset and value props passed to your handle component. The offset prop is needed to determine the percent left your handle needs to be. Without using this, your handle will not move, which seems to be what you are currently experiencing. The value prop should be displayed to show users what value the slider is currently at (i.e. 3 out of 10). For example:
const handle = {
position: "absolute",
transform: 'translate(-50%, -50%)',
width: "14px",
height: "14px",
cursor: "pointer",
borderRadius: "50%",
border: "solid 2px #000",
backgroundColor: "#fff"
};
const valueBubble = {
position: "absolute",
top: "-10px",
fontSize: "14px"
};
export default class Handle extends React.Component {
render(){
const handleStyle = Object.assign({ left: `${this.props.offset}%` }, handle);
return(
<div style={handleStyle}>
<div style={valueBubble}>{this.props.value}</div>
</div>
)
}
}
I have not run this code, but this should produce something like a circular handle with a bubble above it holder the slider's current value.