I'm looking for a solution to increase the MUI Divider line thickness (stretching horizontal lines vertically, or stretching vertical lines horizontally).
I've read the documentation of MUI v5 at https://mui.com/api/divider/.
According to the API, there isn't an attribute to modify the Divider "Thickness".
I've tried different implementations of inline styles (specific to MUIv5):
<Divider sx={{height:"15px", fontSize:"50px", width:"50px", fontWeight:"bold", padding:"15px"}}/>
None of the mentioned attributes modified the "thickness" of the line.
I'm looking for a solution specific to MUI v5 Divider component. I don't want to create a Box component then implement inline sx attributes or custom classes for that Box component.
Anybody have any ideas?
You can change the CSS property border-bottom-width to modify the thiccness of the Divider:
<Divider sx={{ borderBottomWidth: 5 }} />
For vertical Divider:
<Divider orientation="vertical" flexItem sx={{ borderRightWidth: 5 }} />
styled() can also be used to create an enhanced version of Divider that supports a custom thiccness:
const MyDivider = styled(Divider)(({ thiccness, orientation }) => ({
...(thiccness !== undefined &&
(orientation === "vertical"
? { borderRightWidth: thiccness }
: { borderBottomWidth: thiccness }))
}));
<MyDivider thiccness={10} />
<MyDivider orientation="vertical" flexItem thiccness={10} />
Thats a real thicc boi
<Divider sx={{ borderBottomWidth: '45px' }} />
Related
I'm having trouble understanding how to align items in MUI. I have the following code:
class SignUpForm extends React.Component {
render() {
return (
<Button sx={{ justifyContent: "flex-end" }}
color="inherit" }>Sign Up</Button>
)
}
}
which is composed by:
class Nav extends React.Component {
render() {
return (
<Box sx={{ flexGrow: 1}}>
<AppBar position="static">
<Toolbar>
<SignUpForm />
</Toolbar>
</AppBar>
</Box>
)
}
}
But unfortunately the content is still staying to the left. Using this resource https://mui.com/system/properties, I might be missing an important CSS concept here. Could anyone enlighten me?
Thank you.
Toolbar is a flexbox, so you can add a div on the left side and set justify-content to space-between to push the Button to the right:
<Toolbar sx={{ justifyContent: "space-between" }}>
<div />
<SignUpForm />
</Toolbar>
I'm pretty sure you just need to change sx={{ justifyContent: "flex-end" }} to sx={{ marginLeft: "auto" }} on the Button
Might help someone in the future, if you also include where you're importing your components from. Personally, when I encountered the sx not working (realized this was the issue because when I inspected the element says sx=[Object object]), it's because I should've been importing Toolbar from #mui/material, see this reference. Also, I'm using #mui/material v 5.10.11. PS. I'm using Auto-import extension on VSCode, hence, the incorrect import from cause.
So I have a screen that will change according to some media queries, this screen is made up of generic styled components and when I need a particular feature I include it inline with the component on the screen, some of this properties being positioning and or height/width.
After desigining for a desktop screen I am trying to implement a mobile screen.
Ill show some code
type Props = {
setDisplayScreen: Function,
};
const SignIn = ({ setDisplayScreen }: Props) => (
<ScreenDiv>
<ImageContainer>
<ImageDiv bg={sideimage} src={sideimage} alt="logo" />
</ImageContainer>
<FormDiv>
<Input style={{ marginTop: 44 }} placeholder="Username" />
<Input style={{ marginTop: 44 }} placeholder="Password" />
<PinkButton style={{ marginTop: 45, width: 82, cursor: 'pointer' }}>
Sign in
</PinkButton>
<NunitoItalic18 style={{ marginTop: 60 }}>
Forgot username or password
</NunitoItalic18>
<Nunito20
style={{ marginTop: 45.8, cursor: 'pointer' }}
onClick={() => setDisplayScreen('SignUpOptions')}
>
Don’t have an account? Sign up
</Nunito20>
</FormDiv>
</ScreenDiv>
);
export default SignIn;
My specific question is how can I change the url of the image in according to screen size along with margin spaces according to the screen size?
You can try adding an on resize event listener that changes a variable which you then use in your component
if (browserScreenSize === mobile) {
//set margin and image for mobile
} else {
//set margin and image for desktop
}
in your components you then specify the variable name instead of the value
I'm trying to imitate the outlined textfield from Material-UI but I don't know how to hide the border behind the title text.
In the below image, notice how the "Due Date/Time" is taken from the Material-UI library and the title hides the border behind it but when I tried to imitate it with a custom component I just couldn't hide the border.
Alternatively, Is there a better way to use this outline design instead of just implementing it with CSS?
My current component looks liks this:
<div style={inputContainerStyle}>
<div style={{
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
}}
>
Color
</div>
<div
className="flex-row"
style={{
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',
}}
>
{
availableColors.map(color => <div style={colorCircleStyle(color)} />)
}
</div>
</div>
UPDATE
For many scenarios, my later answer (which avoids using TextField and therefore has no side-effects on FormControl context) may be more appropriate: How can I set an static outlined div similar to Material-UI's outlined textfield?
There is a great deal of flexibility in what you can do with TextField. TextField supports plugging in different types of inputs (e.g. Select, input, custom pickers) via the inputComponent property. You could leverage this to put anything inside its labelled outline by creating a custom component like this OutlinedDiv:
import React from "react";
import TextField from "#material-ui/core/TextField";
const InputComponent = ({ inputRef, ...other }) => <div {...other} />;
const OutlinedDiv = ({ children, label }) => {
return (
<TextField
variant="outlined"
label={label}
multiline
InputLabelProps={{ shrink: true }}
InputProps={{
inputComponent: InputComponent
}}
inputProps={{ children: children }}
/>
);
};
export default OutlinedDiv;
The className passed to the inputComponent takes care of the CSS that makes this all work. You can then use this like in the following:
import React from "react";
import ReactDOM from "react-dom";
import OutlinedDiv from "./OutlinedDiv";
import Avatar from "#material-ui/core/Avatar";
import deepOrange from "#material-ui/core/colors/deepOrange";
import deepPurple from "#material-ui/core/colors/deepPurple";
import red from "#material-ui/core/colors/red";
import green from "#material-ui/core/colors/green";
import blue from "#material-ui/core/colors/blue";
import Grid from "#material-ui/core/Grid";
function App() {
return (
<div className="App">
<OutlinedDiv label="Color Picker">
<Grid container justify="center" alignItems="center">
<Avatar style={{ backgroundColor: deepOrange[500] }} />
<Avatar style={{ backgroundColor: deepPurple[500] }} />
<Avatar style={{ backgroundColor: red[500] }} />
<Avatar style={{ backgroundColor: green[500] }} />
<Avatar style={{ backgroundColor: blue[500] }} />
</Grid>
</OutlinedDiv>
<br />
<br />
<OutlinedDiv label="Custom Outlined Thing">
You can put whatever you want in here.
</OutlinedDiv>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
No need to write Outlined div component and all. As we can achieve this using FormControl, FormLabel and Formgroup.
If you follow the Outlined div logic your input fields will lose focus.
The below solution is very easy and quick you just need to wrap your code:
<FormControl component="fieldset" className="fieldset">
<FormLabel component="Legend">Title</FormLabel>
<FormGroup row>
{/*Your Input fields e.g TextField or Select e.t.c*/}
</FormGroup>
</FormControl>
Now using useStyles apply some css:
fieldset: {
width: '100%',
marginBottom: 10,
padding: 10,
border: '1px solid #ddd',
borderRadius: 5
}
The outlined textfield was really tricky to implement. When pushing that feature, we had to consider several options, each with their own drawbacks
SVG Element
Easy to build and animate, but tough to scale with the surrounding elements. If we had gone this route, we would have needed to listen for some type of resize event, which would mean either using a window resize event, which is not robust, or using a newer and less supported feature such as a ResizeObserver/MutationObserver. There are polyfills, but that would have increased the bundle size about 2K for a relatively small feature.
The SVG route is likely what will be used in the future. It is also worth noting that this is how Google's Material Components Web solves the problem.
Plain old border with a background on the label
This is by far the simplest approach, but it is also somewhat inflexible. You can see an example of this in Google's new sign-in flow. There they actually set the background color to white. This is probably a fine approach for plenty of users, but of course won't work if your background is a gradient or some similar edge case. That said, there's no need to worry about resize because it's just a border.
Fieldset and legend
This is what we ended up going with, largely because of its flexibility for end users. Fieldset and its legend component are both built-in ways of attaining pretty much this exact functionality. The big drawbacks to this are that styling across browsers is tough, and the properties we'd be animating on are not performant, such as legend width. Additionally, it's always best to use semantic HTML of course, which this is not, which means we need to use aria-hidden to instruct screen readers to ignore the element.
Depending on your goals, any one of these solutions may work best for you. Beware that getting the perfect solution that solves all of these problems may be very tricky!
Just apply the same background color on the color div as the parent's background color, you can do it by background-color: inherit like this:
<div style={inputContainerStyle}>
<div style={{
...titleStyle,
transform: 'translate(-43px, -11px) scale(0.75)',
fontSize: '17px',
color: 'rgba(0, 0, 0, 0.54)',
position: 'absolute',
background-color:'inherit' **(just add this line)**
}}
>
Color
</div>
<div
className="flex-row"
style={{
border: '1px solid rgba(0, 0, 0, 0.23)',
padding: '18.5px 14px',
borderRadius: '4px',
}}
>
{
availableColors.map(color => <div style={colorCircleStyle(color)} />)
}
</div>
</div>
So this is a sample piece of code for Material Dialog
<Dialog
open={this.props.open}
onClose={this.props.closeAtParent}
PaperProps={{
style: {
minHeight: '75vh',
minWidth: '75vw',
},
}}
aria-labelledby="open-dialog-title"
aria-describedby="open-dialog-description"
>
<DialogTitle id="open-dialog-title">
{this.props.dialogs[this.state.selected].title}
</DialogTitle>
<DialogContent>
<DialogContentText id="open-dialog-description">
{this.props.dialogs[this.state.selected].desc}
</DialogContentText>
{this.imageIfExists()}
</DialogContent>
<DialogActions>
{this.populateButtons()}
</DialogActions>
</Dialog>
Now as you can see I was able to set the dialog width and height through PaperPros but I am unable to set other properties like backdrop color and DialogActions' button alignment.
There is no documentation or SO available for the same which is so sad. They mention classes and PaperProps but do not talk about them.
My questions therefore are,
How do I centre the buttons which by default are aligned at the right?
Also, how do I change the backdrop color which is initially grey?
Material-ui Dialog also inherits ModalComponent you can use the Props of Modal to change the Backdrop color
Modal API Description
Button in DialogActions are by default justified to flex-end. You can override this behaviour using classes property
const styles = {
backdrop: {
backgroundColor: blue[100],
color: blue[600],
},
action:{
justifyContent:'inherit',
}
};
<Dialog
BackdropProps={{
classes: {
root: classes.backdrop,
}
}}
{...other}/>
<DialogActions
className={classes.action}>
you can use Grid to align your content, in this case your buttons as described in here: https://material-ui.com/layout/grid/
you can use BackdropProps to change backdrop values. use: https://material-ui.com/api/dialog/
(it clearly says: The properties of the Modal component are also available. You can take advantage of this behavior to target nested components)
so the final outcome will be:
<Dialog
onClose={this.handleClose}
{...other}
BackdropProps={{
classes: {
root: classes.root
}
}}
PaperProps={{
style: {
minHeight: "75vh",
minWidth: "75vw"
}
}}
aria-labelledby="open-dialog-title"
aria-describedby="open-dialog-description"
>
<DialogTitle id="open-dialog-title">title</DialogTitle>
<DialogContent>
<DialogContentText id="open-dialog-description">
content
</DialogContentText>
</DialogContent>
<DialogActions>
<Grid container justify="center">
<Grid item>
<Button variant="raised" color="primary">
test
</Button>
</Grid>
</Grid>
</DialogActions>
</Dialog>
here is a working example : https://codesandbox.io/s/10vxmwqy7
hope this will help you.
Is it possible to style the React Native CheckBox component?
There is no style property listed here: https://facebook.github.io/react-native/docs/checkbox.html
I put an invalid style property on it, and the RN warning message that popped up told me all the valid CSS properties, but none of them did anything beneficial towards styling.
The component looks decent, but I want to change it from that teal color to a brand color.
Is it possible?
These properties are not working but are listed as valid style props for CheckBox:
{
height: 50, // changes the hitspace but not the checkbox itself
width: 50,
borderWidth: 1, // does nothing
backgroundColor: 'red', // makes the area around and inside the checkbox red
borderColor: 'green', // does nothing
borderStyle: 'dotted' // does nothing
}
I don't understand why it even exists if everyone just makes their own checkbox. If I did that, I wouldn't really have any use for because all it gives is
value={this.state.rememberMe}
onValueChange={() => this.toggleRememberMe()}
unless there is something magic it does under the hood. It has a decent onChange animation, but that would be deprecated instantly when I make my own and use something like <TouchableHighlight or Opacity> wrapped around an on/off image or <View>.
I can't find any info on Google except hundreds of custom checkboxes. It's actually really hard to search around them.
You can use https://github.com/react-native-community/react-native-checkbox
Android: you can use tintColors.
import CheckBox from '#react-native-community/checkbox';
.
.
.
<CheckBox
value={option.item.selected}
onValueChange={() => {}}
tintColors={{ true: '#F15927', false: 'black' }}
/>
Transform can be used to change CheckBox size.
<CheckBox
style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
/>
checkbox examples
https://github.com/react-native-checkbox/react-native-checkbox
No I couldn't find a way, but wrapping it in a View was one option:
<View style={{
position: 'absolute',
right: 0,
width: 50,
height: 50,
margin: 10,
zIndex: 100,
}}>
<Checkbox
status={i === index ? 'checked' : 'unchecked'}
className=""
/>
</View>
Short answer is you simply can't. React Native uses the native Android Checkbox component, and the only customization you get to do is changing the tint colors, as seen in the react-native-checkbox community project. This prop is undocumented in the official React Native docs.
Additionally, here's the TypeScript definition for this component: AndroidCheckBoxNativeComponent.js. Notice how the only props relayed to the native component are onChange, onValueChange, testID, on, enabled and tintColors.
Yes, you can, i recommend you that use react native elements, and with this library you have 2 options, checkedColor and uncheckedColor, by default in checkedColor is green, but you can change it to what you want, for example, checkedColor={"#fff"} or checkedColor="#fff" try them, it apply for 2 options, good luck!
For IOS use onTintColor and pass the value in string onTintColor={'red'}
<CheckBox
onTintColor={Color.theme}
onCheckColor={Color.theme}
value={isSelected}
onValueChange={setSelection}
style={Style OBJECT}
/>
import CheckBox from '#react-native-community/checkbox';
const Checkbox = (props) => {
// const [isSelected, setSelection] = useState(false);
const [toggleCheckBox, setToggleCheckBox] = useState(false)
return (
<View style={[useTailwind``, styles.container]}>
<View style={styles.checkboxContainer}>
<CheckBox
disabled={false}
value={toggleCheckBox}
tintColors={{true: '#368098'}}
onCheckColor={'#6F763F'}
onValueChange={(newValue) => setToggleCheckBox(newValue)}
/>
<Text style={[useTailwind`font-normal text-base font-sans`, styles.label]}>{props.value}</Text>
</View>
{/* <Text>Is CheckBox selected: {isSelected ? "👍" : "👎"}</Text> */}
</View>
);
};
its possible now..
just simply gives tint color of the same color of background