I've only found dated responses for this question. I'm trying to change the highlighted background for today. I have the <FullCalendar> component inside <Box>:
<Box flex={"1 1 100%"} ml={"15px"}>
<FullCalendar
height={"75vh"}
plugins={[
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin
]}
headerToolbar={{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
}}
initialView={"dayGridMonth"}
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
select={handleDateClick}
eventClick={handleEventClick}
eventsSet={(events) => setCurrentEvents(events)}
initialEvents={[
{
id: "aapl_q1_2023",
title: "AAPL Q1 2023",
date: "2023-02-02"
},
{
id: "amzn_q4_2023",
title: "AMZN Q4 2023",
date: "2023-02-02"
},
]}
sx={{
"& .fc-today": {
backgroundColor: `${colors.redAccent[500]} !important`
}
}}
/>
</Box>
I'm able to manually change the color by toggling the css line item
But the sx isn't overriding it:
sx={{
"& .fc-today": {
backgroundColor: `${colors.redAccent[500]} !important`
}
}}
It seems that FullCalendar accepts a CSS variable --fc-today-bg-color for customizing background color of "today", according to their customization guide.
If the preference is to use a custom color defined with MUI, perhaps try set the CSS variable with a sx prop on the MUI Box containing FullCalendar.
Minimized live example: stackblitz
Example:
<Box sx={{ ["--fc-today-bg-color"]: pink[500] }}>
<FullCalendar />
</Box>
Setting this by sx prop on FullCalendar itself could also work if the component has already been wired up with MUI by its styled() utility.
Related
How can I change the root styles in Checkbox. This does not work.
<CheckboxItem
onChange={()}
checked={isChecked}
label="Show Checkbox"
classes={{ root: classes.checkbox }}
/>
className={{ root: classes.checkbox }}
is erroring out as well. Thank you.
You can do it either using the sx property like the documentation suggests:
<Checkbox
{...label}
defaultChecked
sx={{
color: pink[800],
'&.Mui-checked': {
color: pink[600],
},
}}
/>
Another way you can create a styled component:
const CheckBoxStyled = styled(Checkbox)`
root: {
"&$checked": {
"& .MuiIconButton-label": {
color: "red",
...
},
...
}
},
`;
<CheckBoxStyled checked value="TestValue" onChange={handleChange}/>
In case the above it's not a big help can you please provide some more info of what you want to change and the version of MUI and probably can send you a working sample.
Like the title says, I want to ask if there's a way to create a button with gradient color and an icon in React Native? I know that gradient color can't be added without an external library, so I tried this one:
https://www.npmjs.com/package/react-native-gradient-buttons
However, I can't see a way to add Icon as a props to the gradient buttons of this library. The answer doesn't have to use the library, I would just like to know a convenient way to achieve the button I described. Thanks.
You can create your own button with an icon like below
import { Ionicons } from '#expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
const GradientButton = ({ onPress, style, colors, text, renderIcon }) => {
return (
<TouchableOpacity onPress={onPress}>
<LinearGradient colors={colors} style={style}>
{renderIcon()}
<Text style={styles.text}>{text}</Text>
</LinearGradient>
</TouchableOpacity>
);
};
Usage would be
<GradientButton
onPress={() => alert('Button Pressed')}
style={{
padding: 15,
alignItems: 'center',
borderRadius: 5,
flexDirection: 'row',
}}
colors={['#874f00', '#f5ba57']}
text="Press"
renderIcon={() => (
<Ionicons
name="md-checkmark-circle"
size={20}
color="green"
style={{ marginHorizontal: 20 }}
/>
)}
/>
You will have more control over the button and change it anyway you want, you can add more props to customize it the way you want.
You can try out the demo here
https://snack.expo.io/#guruparan/gradientbutton
The above icon and gradient packages are for expo
You can use RN Vector icons and Linear gradient package as well
In the docs of the package you provided it shows an example like this:
<GradientButton
style={{ marginVertical: 8 }}
textStyle={{ fontSize: 20 }}
gradientBegin="#874f00"
gradientEnd="#f5ba57"
gradientDirection="diagonal"
height={60}
width={300}
radius={15}
impact
impactStyle='Light'
onPressAction={() => alert('You pressed me!')}
>
Gradient Button #2
</GradientButton>
Maybe try adding your icon in between the tags instead of as prop?
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.
How to align text of a Material UI input text? Following does not seem to work. Im using version 1.x
import {Input} from 'material-ui';
//didn't work
<Input
className="max-w-128 inline-block"
style = {{textAlign: 'center'}}
id="input-quantity"
inputStyle={{ textAlign: 'center' }}
//tried hintStyle as suggested in a bug
hintStyle={{ width: '600px', textAlign: 'center' }}
value={this.state.currentRecord.quantity}
onChange={this.handleCurrentRecordTextChange('quantity')}
/>
you just need to use (with styles overriding) :
classes={{
input: classes.inputCenter
}}
and the styles should be:
const styles = theme => ({
inputCenter: {
textAlign: "center",
color: "red"
}
});
go through the documentation from here: https://material-ui.com/api/input/#css-api
here is a working example: https://codesandbox.io/s/n9nr9x8xo0
hope this will help you.
Please Use
<Typography align="centre|right" />
If you have specific font already set then use above solution with withStyle HOC
I want to override some sub-component of style in react native.like -
I have created an style CircleShapeView
const styles = StyleSheet.create({
CircleShapeView: {
width: 50,
height: 50,
borderRadius: 50/2,
backgroundColor: '#000'
},
});
I want change backgroundColor ,when i am usins this style. some thing like this.
<Image
style={backgroundColor: "#fff", styles.CircleShapeView}
...
/>
What is right way to do it?
To override the backgroundColor, you could just do this:
<Image
style={[ styles.CircleShapeView, { backgroundColor: "#fff" } ]}
...
/>
A more flexible way of overriding style would be to pass an additional style prop to your subcomponent.
You would call your subcomponent like that:
<Subcomponent passedStyle={{ backgroundColor: '#fff' }} />
Apply passed style to your image:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
To add to the other answers here, make sure that you are specifying the inherited props style AFTER the style on the component you are trying to override.
Example:
Do this:
<Image
style={[ styles.CircleShapeView, this.props.passedStyle ]}
...
/>
Not this:
<Image
style={[ this.props.passedStyle, styles.CircleShapeView ]}
...
/>
The second example will NOT override the style on the component.