const styles = {
bgColor:{
backgroudColor: '#f9a825'
}
}
<Button color='primary' classes={fab:classes.bgColor} variant="fab" aria-label="Checkout"> Click Here </Button>
Here, I want to change the background-color. its applying, but it giving priority to Theme css.
The classes prop is applied incorrectly.
You shouldn't even use classes since you don't seem to inject any; you should use style.
<Button color="primary"
style={styles.bgColor}
variant="fab"
aria-label="Checkout">
Click Here
</Button>
If you indeed inject classes into you component, you use it like this:
<Button color="primary"
classes={{ fab: classes.bgColor }}
variant="fab"
aria-label="Checkout">
Click Here
</Button>
Related
<Button variant="contained" color="success">save</Button>
<Button variant="contained" color="error">delete</Button>
Both buttons show the default color.
Most components behave the same way: success, info... none of them work as I expect them to.
I know this is not a bug, according to the API documentation, MaterialUI's components simply don’t recognize other palette's colors at all, but this bugs me.
Why components only recognize primary and secondary colors?
How should I use the colors of my theme.palette so that they are applied to my components?
Is changing the theme my only option to achieve the effect I am looking for?
According to the Button API documentation, the accepted values for the color prop are 'default', 'inherit', 'primary' and 'secondary' only. Therefore, Material UI will not recognize color='success' nor color='error' and show the corresponding colors.
I assume you are trying to use the success and error colors from the default theme. In the default theme object, the colors for success and error can be found in theme.palette.success and theme.palette.error respectively.
Therefore, we can access the default theme colors using the following way:
const useStyles = makeStyles((theme) => ({
success: {
backgroundColor: theme.palette.success.main
},
error: {
backgroundColor: theme.palette.error.main
}
}));
export default function ContainedButtons() {
const classes = useStyles();
return (
<div>
<Button variant="contained" classes={{ root: classes.success }}>
Save
</Button>
<Button variant="contained" classes={{ root: classes.error }}>
Delete
</Button>
</div>
);
}
I am trying to use material ui component into react class based component material ui component demo everthing wrtten function based but we are written all project pages are class based very difficult to integrating material UI component
It is not difficult to integrate on class-based Components. yes, In Material UI doc all the things have integrated on functional-based Components with using Hooks. But you should have some Knowledge about hooks and state concepts then you can easily be integrated them.
for example:
export default function AlertDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location
data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Disagree
</Button>
<Button onClick={handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
So, this Dialog Code has written in functional Based Components But we can easily integrated on class based component Like:
export default class AlertDialog extends React.Components{
constructor(){
super(props)
this.state={
open:false
}
}
handleClickOpen = () => {
this.setState({open:true})
};
handleClose = () => {
this.setState({open:false})
};
render(){
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Use Google's location service?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Let Google help apps determine location. This means sending anonymous location
data to
Google, even when no apps are running.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
Disagree
</Button>
<Button onClick={this.handleClose} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
So, just we should have Knowledge about basic React Concept and you can do this.
I would like to add css backdrop which allows the user to close FAB button options once it's clicked. I tried the following CSS solution from here but covers the options and cannot be seeing.
<button ion-button (click)="toggle!=toggle ">Add</button>
<div [ngClass]="{ 'blur' : toggle }">
your content
</div>
<!-- fab placed to the bottom & center -->
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="toggle!=toggle ">
<ion-icon name="arrow-dropup"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button><ion-icon name="restaurant"></ion-icon>
<div class="list-label">Meals</div>
</ion-fab-button>
</ion-fab-list>
</ion-fab>
<div [ngClass]="{ 'blur' : toggle }">
<ion-content
<ion-card class="welcome-card">
<ion-img src="/assets/shapes.svg"></ion-img>
<ion-card-header>
<ion-card-subtitle>Get Started</ion-card-subtitle>
<ion-card-title>Welcome to Ionic</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
</ion-card-content>
</ion-card>
</ion-content
</div>
CSS
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
transition: -webkit-filter 200ms linear;
}
We have a similar thing in our app, but we use the backdrop as a loading screen with animations inside. I used a separate component with a high z-index:50 and if I want to have something on a higher level, I just add a lager number to the z-index of that element. I have ran some tests and it should work with ion-fab.
I am using bootstrap vue to create a dropdown but i can't apply scoped style on it because the main button is being created without the "data-v-XXX" attribute.
is there any workaround?
<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
<b-dropdown-item-button>test 1
</b-dropdown-item-button>
<b-dropdown-item-button>test 2
</b-dropdown-item-button>
</b-dropdown>
<style scoped>
.btn-clean {
color: #337ab7;
}
</style>
Generated code:
<div id="ddown2" class="btn-group b-dropdown dropdown" data-v-25a41064="">
<button id="ddown2__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-link dropdown-toggle btn-clean">test1</button>
<div role="menu" aria-labelledby="ddown2__BV_toggle_" class="dropdown-menu">
<button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test1
</button><button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test2
</button>
</div>
</div>
without "data-v-25a41064" on the button id="ddown2__BV_toggle_"
I came across the same issue today. It helped for me if I put the styling a component higher.
Vue-loader only applies scoped styles to the root element of child components.
You need to use the /deep/ CSS selector to target inside child components.
See docs at https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
<button class="button button-outline button-positive">
fes
</button>
If I use ng-click, it's works fine, but I need href.
Drop the button and decorate the a element with the class names.
fes
hope this helps.
in html page:
<button menuClose ion-item (click)="openExternalPage(urlCgu)"><ion-icon name="ios-paper-outline" color="primary" item-start ></ion-icon> Conditions d'utilisation</button>
in ts page:
urlCgu:string;
this.urlCgu = 'http://xxxxxxx.com';
openExternalPage(page){
window.open(page);
}