I'm using google-login package. I've tried to update the background image and dimension of the button, it doesn't seem to work or Am i doing it wrong? I can't find any examples in the docs on how to implement inline styling. I just read that it is an object, here is my code.
<GoogleLogin
className="rounded-circle"
icon={false}
clientId={process.env.REACT_APP_CLIENT_ID}
buttonText=""
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
style={{ backgroundImage:url(${val.image.url}),
width:50,
height:50
}}
/>
Plugin Any help on this would be helpful.
It seems not possible, you can use custom render method.
<GoogleLogin
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
render={renderProps => (
<button onClick={renderProps.onClick} style={customStyle}>This is my custom Google button</button>
)}
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
/>
You can check here, css rules coming from external css files are ignored.You can read it here and here
or you can use alternative plug-in : react-google-button
Actually, you can combine both react-google-login and react-google-button :
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
import GoogleButton from 'react-google-button'
ReactDOM.render(
<GoogleLogin
clientId="your-google-app-client-id.apps.googleusercontent.com"
render={renderProps => (
<GoogleButton onClick={renderProps.onClick} disabled={renderProps.disabled}>Sign in with Google</GoogleButton>
)}
onSuccess={responseGoogleSuccess}
onFailure={responseGoogleFailure}
cookiePolicy={'single_host_origin'}
/>,
document.getElementById('googleButton')
);
Related
I've created a React RTK application with mainly MUI Components.
Suddenly (and I can' reconstruct where when or why) the Mui <Badge> is not showing in my app, although it is in plain sight in the DevTools, elements.
The code that leads to this example page is:
import { Badge, Button } from "#mui/material";
import React from "react";
export default () => (
<div>
<Badge variant="dot" badgevalue={10}>
<Button variant="outlined">test</Button>
</Badge>
</div>
);
I've tried a lot, but with no succes. Can anyone help me out what the problem is here?
you have not added color props to badge. thats why its not displaying. also I checked the badge API. there is no badgeValue props. but there is badgeContent props. https://mui.com/api/badge/
<div>
<Badge variant="dot" badgevalue={10} color="primary">
<Button variant="outlined">test</Button>
</Badge>
<Badge variant="dot" badgeContent={10} color="primary">
<Button variant="outlined">test</Button>
</Badge>
</div>
I am using react js and material ui i want to slides images (autoplay) in card media i don't know what i am doing wrong please let me know if anyone got to know.
<CardMedia
component="img"
height="194"
image={
<Carousel autoplay>
{product.images.map((image, index) => (
<div key={index}>
{console.log(image)}
<img
src={`http://localhost:5000/${image}`}
/>
</div>
))}
</Carousel>
}
/>
import by using this
import { Carousel } from 'react-responsive-carousel';
You can import an image by calling the relative path and setting it up like below:
import { image } from '../../images/xxx.jpg';
<img src={image} />
I hope it solves your issue.
I am using gatsby-plugin-image's StaticImage component in my web app, and I am having trouble changing objectFit's property from 'cover' to 'contain.'
Here is a sample of my code:
import React from 'react'
import { Container, Row, Col } from 'react-bootstrap'
import { StaticImage } from 'gatsby-plugin-image'
export default function About() {
return (
<div id="about">
<Container fluid >
<Row className="justify-content-center align-items-center">
<Col md={12} >
<StaticImage src="../images/coolImage.JPG" objectFit="contain" alt="Profile Picture" />
</Col>
</Row>
</Container>
</div>
)
}
I have also tried using style={{ objectFit: 'contain' }} and imgStyle={{ objectFit: 'contain' }} to see if using those props would change the styling. I'm using Sass to style other parts of the website as well, and adding that styling option via Sass and class names isn't working either.
Any ideas as to why the default object-fit: 'cover' won't change?
There's a prop 'objectFit' (along with 'objectPosition') that can be passed to StaticImage directly. I'd try that. My guess is that your passed styles are being overwritten inside StaticImage, but passing the direct props would fix it. https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/
I had to add style={{height: "100%"}} as a prop to StaticImage in order to make an image cover a full view-height container. The image wrapper does not automatically take the whole space of the container element.
return (
<Card>
<CardHeader
title="Full Name"
subtitle="#username"
avatar="./../assets/img/image.gif" />
<CardText expandable>
<div>
<p>{message}</p>
</div>
<div>
{tagElements}
</div>
</CardText>
</Card>
);
};
Folder structure:
- app
-- assets
--- img
---- image.gif
-- src
Do I need to import something on every js file where I would like to show images? Why can't I just point to the folder where it's located and just show it? What am I missing?
In the CardHeader component you will need to import the Image component from react native and supply the uri prop to that component to render. Here is the documentation for image
import {Image} from 'react-naitve'
One gotcha with react native is that you need to provide explicit width and height to the image in order for it to render. Otherwise it appears as 0x0.
So something like this within your CardHeader would work:
<Image
style={{width: 50, height: 50}}
source={{uri: props.avatar}} />
You have to import your image and then use it. It is enough to add the image path in your js file header. Example:
import myimage from 'XXX/images/x.png';
Then you have to show it like that:
<div className="myimage">
<img src={myimage} />
</div>
Let me know if it is works for you.
I have the following code snippet, which doesn't display anything at all in the browser window. Can you please tell me why.
render(){
return (
<div>
//Rama
//console.log('In Render'),
<div>
enter code here
<div>
<TextField
hintText="Username"
/>
<br/>
<TextField
hintText="Password"
/>
<br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField>Login Successful</TextField>
</div>
</div>
)
}
pastebin link for complete component: http://pastebin.com/etjUwvWT
To render material-ui components you need to wrap them in MuiThemeProvider.
As Per DOC:
Beginning with v0.15.0, Material-UI components require a theme to be
provided. The quickest way to get up and running is by using the
MuiThemeProvider to inject the theme into your application context.
How to use these components?
First use this line to import MuiThemeProvider :
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
Use this render method:
render(){
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<div>
<TextField
hintText="Username"
/>
<br/>
<TextField
hintText="Password"
/>
<br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField/>
</div>
</div>
</MuiThemeProvider>
);
}
If you are using material-ui components across the project then no need to use MuiThemeProvider on each page, you also include it globally. Include this in your router or put this line on main page of the application.
One more thing you are only importing the injectTapEventPlugin, you need to initialise that also. Put this line in this component after importing:
injectTapEventPlugin();
Looks like you're having JS-comments (//) in your JSX code. That'll make stuff break.
If you want to comment something out in JSX, you have to escape into JS with curly brackets and then use multi line comments (/* comment */) - like so:
render() {
return (
<div>
{/* <button>Commented out button</button>*/}
</div>
);
}
Remove text from between the TextField tags. Also wrap your code in your render method between MuiThemeProvider.
This worked for me.
render(){
return (
<MuiThemeProvider>
<div>
<div>
<TextField
hintText="Username"
/><br/>
<TextField
hintText="Password"
/><br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField></TextField>
</div>
</div>
</MuiThemeProvider>
);
}
As an FYI, so it is not the most obvious responses, but just in case this is your situation, my issue was that I had changed my Windows 10 personalise settings to use contrast and my blue bar in my React app disappeared! After a while of searching, I switched it off and my bar was back.