I am building a react app and I am using Material UI for the UI. I am also using a Login Component from #microsoft/mgt-react
On my Home page I am using the Login component from mgt-react to handle login functionalities. The components acccepts props such as loginInitiated, loginCompleted etc that i can pass my functions to. Take a look at the example below
import { Login, Providers } from '#microsoft/mgt-react';
<Login loginInitiated={handleLoginStarted} loginCompleted={handleLoginCompoleted} />
Below is how the ui Looks
The last button called singIn is the #microsoft/mgt-react Login that is imported above.
So my concern is that I do not like the ui of the #microsoft/mgt-react Login component and I want to use the Native Material UI Button components while still having access to the props in the #microsoft/mgt-react Login component such as loginInitiated and loginCompleted.
Is there a way i can forward these props to my own Material UI button Component?
Related
I'm using the Amplify UI Authenticator component for the Authentication and added social Provider login also. Is there any way to customize the component. I Want the Social Provider buttons after the Sign in button.
<Authenticator
loginMechanisms={["email"]}
formFields={formFields}
components={components}
socialProviders={["google", "facebook", "amazon", "apple"]}
/>
I have a component modal and when click inside menu of my app to open this modal.
I think i will use IPC of electron but can't use IPCRender in React component and can not listen event when click menu. Please help me.
I have an app with html:
<div id="react-root-navbar"></div>
<div id="react-root-body"></div>
and corresponding React components that call React.DOM.render on each div.
Both React components use Material UI components. Thus, a set of inline styles are injected for each component.
The problem is that all styles for the second component will be further down in the HTML than for the first component, thus these CSS rules will be higher priority. This interrupts the intended cascading flow and results in lots of incorrect styling. For example, .MuiAppBar-colorPrimary is overruled by .MuiPaper-root:
I know that the ideal solution would be to have all components within a single React app and prevent duplciate imports in the first place. This isn't possible with the codebase I'm working with, however, which uses a Django frontend migrating one piece at a time to React.
Is there any way to make the styling exported by Material UI for each component scoped specifically to that component, so that the styles do not overwrite each other?
MUI has a component StylesProvider that allows you to adjust how styles are added. StylesProvider has a prop generateClassName to which you can pass a generator to determine how class names are generated.
You can create a generator using a MUI function createGenerateClassName, to which you can pass the option disableGlobal to add simple suffixes to class names so that each app will have scoped CSS applied to it.
I was already wrapping all MUI components in a component MUIThemeProvider to use the MUI component ThemeProvider. I just added StylesProvider to this wrapper:
const generateClassName = createGenerateClassName({
disableGlobal: true,
});
return (
<StylesProvider generateClassName={generateClassName}>
<ThemeProvider theme={theme}>
{props.children}
</ThemeProvider>
</StylesProvider>
)
I have just started learning react and Meteor. I am using the okgrow:accounts-ui-react to show a login and signup form on my site. You only have to add the component to show the signup/login form on your page. However, the dropdown form is ugly and does not go well with my site's design. Therefore, I want to learn how can you modify the styles of such meteor components. In this case, how can you change the style of this component to appear as a materially design form. I am using materialize.css and I want to know how can I give this login component a materialize design inspired look? I want to make the dropdown inspired by material design and also change the contents of the form. The following is my component that I created by following a video on leveluptuts.
import React, {Component} from 'react';
import { LoginButtons } from 'meteor/okgrow:accounts-ui-react';
class App extends Component{
render(){
return (
<div>
<header>
<h1>Level Up Voting </h1>
<LoginButtons/>
</header>
</div>
);
}
}
The following image shows how my login button appears on screen:
I am trying to implement a login page in admin on rest with a link to a registration form. I am quite a newbie in react and frontend development in general.
I duplicated the login page from the admin on rest demo, but I can't figure out how to add the link in the bottom. I tried adding a component from react-router but I keep getting all sorts of errors. Is there any example I can follow?
EDIT: I am trying to add a registration page with a custom route but the page is displayed inside the admin UI. This is what it looks like:
admin-on-rest is a frontend framework but it's also a bunch of components you can use/integrate in your own app.
It's important to understand how react is working to work with admin-on-rest.
Afaik you have to know about redux, redux-form, react-router and redux-saga.
There is a short description how to add a login page and
how to customize the login page.
But this is not an example.
Here is the source code of the login page. If you really want to duplicate the page you can add a link to the registration page in the render method.
First create a file called
login.js
and duplicate the original login page. Import the Link-Component:
import { Link } from 'react-router-dom';
Afterwards use the Link somewhere, for example between </form> and </Card> (between line 106 and 107).
<Link to={{pathname: "/register"}} >Registration</Link>
In your
app.js
import your created login page:
import Login from './login';
and use it:
<Admin loginPage={Login} authClient={authClient} restClient={jsonServerRestClient('http://jsonplaceholder.typicode.com')}>
EDIT:
Now you have a "Registration"-Link in your Login page.
Now, it's time to create the registration page. I am not a admin-on-rest expert, but I think the idea of admin-on-rest is to show always the menu and check the authorization. I think the most of the admin app's will not have a registration page, which must be visible for users which have not logged in and they should not see the menu on the left side. It's similar to a login page. So you have to create custom route to a custom page (without a authorization check) with a custom layout.
Create a new file called
MyLayout.js
with the content of
Layout.js
and remove the lines
injectTapEventPlugin()
and
<Sidebar>
{menu}
</Sidebar>
to hide the menu on the left side.
Then create a file called
customRoutes.js
with the following content:
import React from 'react';
import { Route } from 'react-router-dom';
import Register from './Register';
export default [
<Route exact path="/register" component={Register} />
];
and a file called
Register.js
with
import React from 'react';
import { Card, CardText } from 'material-ui/Card';
import { ViewTitle } from 'admin-on-rest';
const Register = () => (
<Card>
<ViewTitle title="Register" />
<CardText>
<div>This is the register page.</div>
</CardText>
</Card>
);
export default Register;
In your
app.js:
import MyLayout from './MyLayout';
import customRoutes from './customRoutes';
import MyLayout from './MyLayout';
import authClient from './authClient';
<Admin appLayout={MyLayout} loginPage={Login} authClient={authClient} customRoutes={customRoutes} restClient={myApiRestClient}>
This is just an (ugly) example.
Hope this helps. :)