hey i wanted to know how can i set my auto compleate from mui
to look like google search bar with the round container and round object
itryd this but this not working
const StyledAutocomplete = styled(Autocomplete)({
"& .MuiAutocomplete-inputRoot": {
color: "grey",
backgroundColor: "white",
borderRadius: "100px",
height: "100%",
padding: 5,
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "transparent",
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "transparent",
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "transparent",
},
},
"& .MuiOutlinedInput-root": { paddingRight: 10 },
});
Related
Hello I am trying to configure my dropdown using Fluent ui. But I am unable to achieve current vs expected result.
How do you I configure in order to have a black background when drop down. At the moment my drop-down background is standard white and text normal.
Current:
Expected Result:
My code:
import { Dropdown } from '#fluentui/react/lib/Dropdown';
Inline styling:
const dropdownStyles = (styleProps) => {
const chkStyles = {
title: [{
borderRadius: "5px",
backgroundColor: "transparent",
borderColor: "white",
height: "50px",
width: "100%",
fontSize: 16,
color: "white",
lineHeight: "45px",
}],
dropdown: [{
color: "white",
fontSize: 16,
"&:hover .ms-Dropdown-titleIsPlaceHolder": {
backgroundColor: "transparent",
color: "white",
},
"&:hover .ms-Dropdown-title": {
color: "white",
backgroundColor: "transparent",
borderColor: "white",
},
"&:focus .ms-Dropdown-title": {
color: "white",
},
"&:active .ms-Dropdown-titleIsPlaceHolder": {
color: "white",
},
"&:focus .ms-Dropdown-titleIsPlaceHolder": {
color: "white",
},
}],
"caretDown": {
paddingTop: "10px",
color: "white !important",
},
};
return chkStyles
};
Dropdown:
<Dropdown
componentRef={dropdownRef}
placeholder="Choose a category"
aria-label="choose a category"
title="choose a category"
aria-required="true"
onChange={handleCategory}
value={category}
options={categoryoptions}
calloutProps={{ directionalHintFixed: true }}
styles={dropdownStyles}
type='text'
errorMessage={validationErrors.category ? "Category is required" : undefined}
/>
I wonder how do I remove the orange box encapsulating the checkbox. I couldn't find a way to remove it? It does appear when my mouse is clicking on that part.
StyledGrid
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
":focus": {
outline: "none",
},
},
"& .MuiDataGrid-columnHeaders": {
borderTopLeftRadius: "8px",
borderTopRightRadius: "8px",
backgroundColor: "#fbfbfc",
textTransform: "uppercase",
"& .MuiDataGrid-menuIcon": {
display: "none",
},
"& .MuiDataGrid-columnHeaderTitle": {
color: theme.palette.text.secondary,
},
"& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-columnHeaderTitle": {
color: theme.palette.text.primary,
},
},
"& .MuiDataGrid-row, & .MuiDataGrid-cell": {
maxHeight: "initial !important",
minHeight: "initial !important",
},
}));
Component
<StyledDataGrid
columns={supplierColumns}
rows={rows}
loading={rows.length === 0}
disableSelectionOnClick
checkboxSelection
onSelectionModelChange={(ids) => setSelectedRowIds(ids)}
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
rowsPerPageOptions={[5, 10, 20]}
pagination
/>
I think you have to add outline directly , or try pesudo focus-within selector
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
outline: "none"
},
}));
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
"& :focus-within": {
outline: "none"
}
},
}));
I am struggling with changing MUI's Select background color. I've tried multiple solutions. I've tried changing it from <Select/> className property and it didn't work. Neither did setting it from Menu Prop's. I believe my theme might be causing this problem.
My select component
<Select
variant="standard"
id={id}
native={true}
className={classes.select}
MenuProps={{
sx: {
maxHeight: 200,
},
classes: {
paper: classes.paper,
},
}}
inputProps={{
classes: {
root: classes.root,
},
}}
sx={{
border: errors.installments
? "1px solid rgba(255, 0,0,0.5)"
: "1px solid rgba(0, 0, 0, 0.1)",
borderRadius: 1,
}}
disabled={installments ? false : true}
{...field}
></Select>
The styling sheet
export default makeStyles({
form: {
minWidth: 280,
maxWidth: "45%",
backgroundColor: "rgba(255, 255, 255, 0.1)",
borderColor: "rgba(255, 255, 255, 0.4)",
borderRadius: 1,
},
select: {
padding: 10,
"&:before": {
borderColor: "white",
borderRadius: 5,
content: "''",
},
"&:after": {
borderColor: "rgba(255, 255, 255, 0.7)",
borderRadius: 5,
},
"&:not(.Mui-disabled):hover::before": {
borderColor: "white",
borderRadius: 5,
},
'&:focus':{
backgroundColor: 'red'
}
},
root: {
color: "white",
borderRadius: 1,
},
paper: {
position: "absolute",
overflowY: "auto",
overflowX: "hidden",
// So we see the popover when it's empty.
// It's most likely on issue on userland.
maxHeight: 200,
},
});
The palette defined on the theme
palette: {
mode: "light",
primary: {
main: "#0f9688",
},
secondary: {
main: "#D96098",
},
info: {
main: "#007668",
},
background: {
paper: "#0f9688",
default: "ffffff",
},
},
MuiSelect with green background
You can modify the underlying <MenuList> styles by doing:
<Select
inputProps={{
MenuProps: {
MenuListProps: {
sx: {
backgroundColor: 'red'
}
}
}
}}
>
<Select>
componentsProps={{
listbox: {
sx: {backgroundColor: '#000'}
}
}}
</Select>
You can use the sx prop to change the color of the Select Component.
<Select
sx={{ backgroundColor:'red' }}
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
I want to override the marginTop: 16 property that occurs in this implementation of StepLabel:
label: {
color: theme.palette.text.secondary,
'&$active': {
color: theme.palette.text.primary,
fontWeight: 500,
},
'&$completed': {
color: theme.palette.text.primary,
fontWeight: 500,
},
'&$alternativeLabel': {
textAlign: 'center',
marginTop: 16,
},
'&$error': {
color: theme.palette.error.main,
},
},
So that I get this as the desired outcome:
But I cannot for the life of me figure out how.... here's my implementation:
<StepLabel
classes={{
root: classes.root,
labelContainer: classes.labelContainer,
label: classes.myLabel
}}
>
{this.state.labels[label - 1]}
</StepLabel>
Here's the classes:
const styles = theme => ({
root: {
marginTop: 0,
padding: 0,
"& $alternativeLabel": {
marginTop: 0
}
},
labelContainer: {
backgroundColor: "green",
marginTop: 0,
"& $alternativeLabel": {
marginTop: 0
}
},
myLabel: {
backgroundColor: "red",
marginTop: 0,
"& $alternativeLabel": {
marginTop: 0
}
},
});
The result - the marginTop DOES NOT get overridden. :(
Further information - the property that I want to override:
seems like the way to do it is like this - credit to this answer Material-UI Style Override?
Put an empty alternativeLabel: {} in, so that the property &$alternativeLabel is overridden:
const styles = theme => ({
labelContainer: {
"& $alternativeLabel": {
marginTop: 0
}
},
alternativeLabel: {},
});
and then call it like this in your component:
<StepLabel
classes={{
alternativeLabel: classes.alternativeLabel,
labelContainer: classes.labelContainer
}}
>
I want to make the image sticking to the bottom of the app. How can I do it ? I have tried different stack overflow solutions but I still cannot get the result. As you can see there is a large white space between the red border and the image. The image is trim and there should be no extra space under it. Thanks in advance !
const TubeBoard = () =>
(
<View style={styles.container}>
<Image
source={bigTube}
style={styles.imageStyle}
resizeMode="contain"
/>
</View>
);
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-end',
width: deviceWidth,
height: deviceHeight,
},
imageStyle: {
borderColor: 'red',
borderWidth: 10,
position: 'absolute',
bottom: 0,
width: '100%',
},
});
screenshot here
Solved : Get the desired result by adding { flex: 1 } to container, and height to the image.
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
borderColor: 'blue',
borderWidth: 10,
},
imageStyle: {
borderColor: 'red',
borderWidth: 10,
position: 'absolute',
bottom: 0,
width: deviceWidth,
height: deviceHeight * 0.75,
},
});
desired result
I believe that your container view is not filling the entire screen.
Try adding flex:1 to your container style.
const styles = StyleSheet.create({
container: {
...
},
imageStyle: {
borderColor: 'red',
borderWidth: 10,
width: deviceWidth,
height: 100
},
});
Get the desired result by adding { flex: 1 } to container, and height to the image.
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
borderColor: 'blue',
borderWidth: 10,
},
imageStyle: {
borderColor: 'red',
borderWidth: 10,
position: 'absolute',
bottom: 0,
width: deviceWidth,
height: deviceHeight * 0.75,
},
});