I'm trying to show tooltips using reactstrap. The tooltips appears correctly but without fade-in/out transitions. Using the inspector I noticed that the class fade does not get applied to the tooltip <div>:
I followed the installation instructions on https://www.npmjs.com/package/reactstrap#adding-bootstrap adding these dependencies to my package.json using yarn:
"bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.3.2",
"react-popper": "^1.3.2",
"react-transition-group": "^2.5.3",
"reactstrap": "^7.1.0",
This is an example component of tooltip usage taken from my app:
import React from 'react';
import nanoid from 'nanoid';
import {UncontrolledTooltip} from 'reactstrap';
export default class ExampleTooltip extends React.PureComponent {
constructor(props) {
super(props);
this._id = `autogeneratedid-${nanoid()}`;
}
render() {
return (
<>
<span id={this._id}>Hover me!</span>
<UncontrolledTooltip target={this._id}>
My tooltip
</UncontrolledTooltip>
</>
);
}
}
I'm including bootstrap using SASS in my index.js file:
import '../styles/style.scss';
And in my style.scss:
#import 'bootstrap/scss/bootstrap.scss';
Am I missing something?
I created a codesandbox on https://codesandbox.io/s/01zm5k5w10
Thank you.
It looks like the problem is not on the CSS/SASS - it's not some class that you are missing or not includes - but its something in you're react/js because it's not applied the "fade show" classes to the wrapper div like on the docs website.
Edit - Its looks like they have some issue on their code - all the real example of reactstrap except for their documentation site - have the same issue with fade effect - for example, your sandbox, a lot of examples from codepen that i cant paste here and more.
when you looking for this issue in GitHub you can see some Discussions about it - I think that there is something on library and not something in your code.
have you check the styles.css in devtool ?
inspect => sources
Related
Implementing a simple carousel using react material-ui carousel the Invalid hook call error rises.
Error occurred:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I simplified the documentation starter code as much as I could, but the error still remains.
Seems the dependency packages version looks correct and error just rise from the code I had no idea how to fix that.
My code:
On stackblitz
import * as React from 'react';
import { Paper, Typography, Button } from '#mui/material';
import Carousel from 'react-material-ui-carousel';
const Demo = (props) => (
<Carousel>
{/* Change above line to <> and it work, maybe some version conflicts?? */}
<Paper>
<Typography>First Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
<Paper>
<Typography>Second Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
<Paper>
<Typography>Third Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
</Carousel>
);
export default Demo;
Looks like they havn't updated the package yet to support react 18 https://github.com/Learus/react-material-ui-carousel/issues/174.
If you're using npm add:
"overrides": {
"react-material-ui-carousel": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
to package.json. Or if you're using yarn add:
"resolutions": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
I also had to delete both my package-lock.json and node_modules then run npm install but maybe try without first.
Struggling to wrap my head around this issue. I am using the built in CSS modules for my components in Nextjs. When i lazy load my component that has a CSS module, I get the error CSS Modules cannot be imported from within node_modules..
If I replace ${asset.name} with the value button, i.e dynamic(() => import(#preamp/assets/Button)), nextjs will compile.
The code will execute correctly if i dont use CSS modules. It will lazy load dynamic components in. Only when i add the file to the project.
If i hardcode the import path it compiles. I only have this issue when I use a template literal string.
Any help is highly appreciated.
import React from 'react';
import dynamic from 'next/dynamic';
const asset = { name: 'Button' };
const NewComponent = dynamic(() => import(`~/assets/${asset.name}`), {
ssr: false,
});
export default function index() {
return (
<div className="grid-container">
<div className="grid-x grid-margin-x">
<div className="cell medium-6 large-6">
<NewComponent />
</div>
<div className="cell medium-6 large-6">12/6/8 cells</div>
</div>
</div>
);
}
Button.js
import React from 'react';
import styles from './Test.module.css';
export default function Index() {
return <div className={styles['btn-primary']}>Test Div</div>;
}
EDIT:
If I move the Test.module.css into a different folder, it will compile. I havent seen any documentation or reasoning why the CSS modules has to live in a particular area.
button.js updated
import React from 'react';
import styles from '~/test/Test.module.css'; // <-- Moved into a different folder
export default function Index() {
return <div className={styles['btn-primary']}>Test Div</div>;
}
Project specs:
"dependencies": {
"classnames": "^2.3.1",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-react": "^7.27.0",
"next": "^12.0.3",
"next-transpile-modules": "^9.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.43.4"
},
Using node v14.17.3
Just wanted to post my answer. If you are going to use dynamic imports, then import paths themselves cannot be dynamic. I've added more information here.
https://github.com/vercel/next.js/issues/31271
I've just upgraded from Material-UI v4 to v5 (now MUI).
If I have a DataGrid component and a component like a Select component (a MenuItem has issues too), the Select component will not work properly. Some additional styles loaded by the DataGrid interfere with it.
The example I'll show here is that values no longer dropdown, but are instead listed horizontally all smashed together. Note that the DataGrid is intentionally empty for this demo.
As opposed to the expected functionality like this:
I've put the code on CodeSandbox
Notice that "#mui/x-data-grid": "^4.0.0" has a dependency on "#material-ui/core": "^4.12.3". I was/am uncomfortable with that, but it does have it listed as a dependency (unless I missed something somewhere).
Is there something I'm missing, or is there a bug in the newest version of DataGrid I'm using? BTW, all of the the DataGrid functionality in my actual application works fine.
For completeness, I'll also include the code here:
import React from "react";
import { render } from "react-dom";
import { DataGrid } from "#mui/x-data-grid";
import Select from "#mui/material/Select";
import MenuItem from "#mui/material/MenuItem";
function App() {
return (
<div>
<Select>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
{/* with DataGrid, Select will shown options on one line */}
{/* comment out DataGrid and the select will work */}
<DataGrid rows={[]} columns={[]} />
</div>
);
}
render(<App />, document.querySelector("#root"));
The package.json file is:
{
"name": "mui-datagrid-isolation-issue",
"version": "5.0.0",
"description": "",
"keywords": [],
"main": "index.js",
"dependencies": {
"#emotion/react": "latest",
"#emotion/styled": "latest",
"#mui/material": "^5.0.1",
"#mui/styles": "^5.0.1",
"#mui/x-data-grid": "^4.0.0",
"#material-ui/core": "^4.12.3",
"react": "latest",
"react-dom": "latest"
}
}
You're using v4 #mui/x-data-grid which uses JSS while the MUI components are in v5 which uses emotion. The JSS styles from the old version overrides the emotion styles leading to unexpected result.
To fix it, install the next version (v5) of #mui/x-data-grid so it can be compatible with MUI v5, and also remove #material-ui/core v4 in your package.json.
npm install #mui/x-data-grid#next
You can always look at the package.json file in the docs demo to see what a working project look like.
Thanks for your answer #NearHuscarl. I don't have the reputation to comment. It took me a while to figure this out as the docs at MUI Data Grid Component demo page are still pointing to npm install #mui/x-data-grid, which leads to the wrong package being installed for MUI5.
Hello I am trying to put a simple react native modal in my react native app (running it on expo) but it is always visible. When I set the visible prop to false, it still displays. The relevant code is below:
Main Component
import React, {Component} from 'react';
import {View, Text, Modal} from 'react-native';
class Home extends Component {
render() {
return (
<View>
<Modal visible={false}>
<Text>Test</Text>
</Modal>
</View>
);
}
}
package.json
"dependencies": {
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-web": "~0.11.7",
"react-redux": "^7.2.0",
"redux": "^4.0.5"
},
Basically the modal is always displaying, even though visible is set to false. Am I missing something here?
I try many ways want to found the problem. The result is:
It seems couldn't work correct on "web site" show, but work on ios or Android emulator.
I try your code on Doc could work, but on sandbox(web site) couldn't.
Maybe you could change to try on other emulator or Expo except "web apps" like "expo ios" or "expo Android"?
I'm using reactstrap in an application, but found some problem with react. The
import CarouselExample from './Sliders/CarouselExample';
render() {
return (
<React.Fragment>
<div id="container">
<CarouselExample />
</div>
</React.Fragment>
);
}
}
line reports a problem and I have no idea with it since I'm a newbie with react-redux. What should I do in my code?
I've grabbed the example code for a carousel from here: https://reactstrap.github.io/components/carousel/
Application built with 16.9.0", "react-dom": "^16.9.0", "react-redux": "^7.1.0", "reactstrap": "^8.0.1","redux": "^4.0.4" and "redux-thunk": "^2.3.0".
The container uses the react component, which is just repeating an image slider div.
Output:
I tried to follow guides and looked up example implementations but could not solve the issue.
Looks like you are missing the bootstrap 4 dependency and CSS.
Install bootstrap 4.3 dependency and import "bootstrap/dist/css/bootstrap.min.css" in your index.js file.
Please see the sandbox for more details:
https://codesandbox.io/s/tender-newton-vty2r
Also beware of using id tags in JSX. It may cause issues when reusing a component. I prefer using refs. Hope this helps.