I'm using Chakra UI in React with Typescript and having such a weird issue I trying to implement Modal with the following code in modal.tsx file.
import {
useDisclosure,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
} from "#chakra-ui/react";
export default function CustomModal() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Create your account</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}></ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
once i click on Open Modal button it simply shows the overlay without actual content of the modal.
I tried to reproduce your problem and found that - For Chakra UI to work correctly, you need to set up the ChakraProvider at the root of your application.
import * as React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "#chakra-ui/react"
function App({ Component }) {
// 2. Use at the root of your app
return (
<ChakraProvider>
<Component />
</ChakraProvider>
)}
Here is the running code sandbox link of your problem.
In App.js I wrapped the application in <ChakraProvider>.
Hope it works for you.
First Check You Wrappped Your App With ChakraProvider If Provided
Related
How to create a settings option for a website that allows users to change the background color, language, dark mode and light mode?
I want Settings Option Which is similar to Qwant Homepage settings
You must provide a code, remember that this forum seeks to solve problems.
I've made a quick example of how you can make a theme system.
You can use two buttons and useState to toggle this. Also, you can use cookies to storage the actual theme of the user.
This is an example component:
First, install
npm install js-cookie
Then, create a component file:
import React, { useState } from 'react';
const Toggler = () => {
const toggleTheme = (themeType) => {
Cookies.set('theme', themeType);
};
return (
<div>
<button onClick={() => toggleTheme('light')}>Light Theme</button>
<button onClick={() => toggleTheme('dark')}>Dark Theme</button>
<p>Current theme is {theme}</p>
</div>
);
}
export default Toggler;
Then you can call Toggler from other components. Also you can get the mode with Cookies.get('theme')
import Cookies from 'js-cookie';
const [theme, setTheme] = useState(Cookies.get('theme') || 'light');
Once you have the theme, you can use this as conditional for your styles or html code.
Im trying to use InputMask from PrimeVue in project on Vue3
I have block in template tag:
<div class="sdf">
<label for="basic">Basic</label>
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
</div>
and i have script:
export default {
data: () => ({
val1: null,
})
}
Everything seems okay, and console doesn't show any errors, but still, input is not visible, only label is shown. What do i do wrong?
It sounds like you didn't register InputMask.
You could register it globally with app.component('InputMask', InputMask):
// main.js
const { createApp } = require('vue')
import PrimeVue from 'primevue/config'
import InputMask from 'primevue/inputmask'
import App from './App.vue'
createApp(App)
.use(PrimeVue)
.component('InputMask', InputMask)
.mount('#app')
demo
I am learning ReactJS. I would like to display dialog when someone clicks on the icon.
Here is the code:
import React, { Component } from 'react';
import { GridList, GridTile } from 'material-ui/GridList';
import FlatButton from 'material-ui/FlatButton';
import Info from 'material-ui/svg-icons/action/info';
import { fullWhite } from 'material-ui/styles/colors';
import Dialog from 'material-ui/Dialog';
import RaisedButton from 'material-ui/RaisedButton';
(... class stuff, handleClose, handleOpen etc.)
showDialoga() {
const actions = [
<FlatButton
label="Cancel"
primary
onClick={this.handleClose}
/>,
<FlatButton
label="Submit"
primary
keyboardFocused
onClick={this.handleClose}
/>,
];
return (
<div>
<RaisedButton label="Dialog" onClick={this.handleOpen} />
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
The actions in this window were passed in as an array of React objects.
</Dialog>
</div>
);
}
render() {
console.log(this.props);
return (
<div style={styles.root}>
<GridList
cellHeight={180}
style={styles.gridList}
padding={10}
>
{this.props.movieData.map(tile => (
<GridTile
key={tile.original_image}
title={tile.title}
actionIcon={<FlatButton
icon={<Info color={fullWhite} />}
style={style}
onClick={() => this.showDialoga()}
/>}
>
<img src={tile.original_image} />
</GridTile>
))}
</GridList>
</div>
);
}
}
I am able to pass other function like () => console.log('I am clicked') to onClick although I am not able to pass that showDialoga().
Any idea what is the problem?
I do not believe that's how you are supposed to use dialog.
Instead of passing return of React component on click, try setting the dialog opened state to be true/false. Also do not forget to bind this to the class level if you are using functions to render different components that has event listeners.
I'm having problems, I'd like help opening a mode from the component.
I would like to open the modal when the user has been verified in a form.
.component.html
<ng-template #modalExample let-c="close" let-d="dismiss">
/** Modal body **/
</ng-template>
<form (ngSubmit)="f.form.valid && signin()" #f="ngForm" class="">
/** Buttons, labels, buttons **/
</form>
.component.ts
signin() {
/**Calling backend**/
this.modalService( *REFERENCE TO MODAL HERE* )
}
I've tried using
#ViewChild('modalExample') modalExample: ElementRef
this.modalService.open(this.modalExample);
The open method expects either a component or a template ref to function correctly, and ViewChild gives you a TemplateRef by default. To resolve this change your ViewChild declaration to:
#ViewChild('modalExample', {read: TemplateRef}) modalExample: TemplateRef<any>;
and pass that through to this.modalService.open(this.modalExample) when you want to open the modal and that should work.
The Bootstrap site has various examples you can look to see how to open the modal.
I am using Paper-Button but I am facing issue that the button text always gets capitalized instead or normal case.
I do not see any CSS or Javascript property being applied to make it upper case.
How should I resolve this problem?
I had the same issue and I solved the problem via adjusting the default theme. Add the following code to a file (name of your choice).js
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
typography: {
button: {
textTransform: 'none'
}
}
});
export default theme;
You can then add the file to your app in index.js. I named it theme.js:
...
import theme from './theme';
...
const app = () => (
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
);
ReactDOM.render(app, document.getElementById('root'));
As was mentioned in the comments above, the material design spec for buttons specifies that the text should be uppercase, but you can easily override its CSS property:
paper-button {
text-transform: none;
}
Inspired by the the CSS style above here is the inline styling for localized Button text transformation -
import {Button} from '#material-ui/core';
// Begin Component Logic
<Button style={{textTransform: 'none'}}>
Hello World
</Button>
// End Component Logic
If you use Mui 5 then you can use the sx syntax
<Button sx={{textTransform: "none"}}/>