It is a simple program . i am trying to use a material UI search icon . i have installed both material UI core and material UI icons . Im still unable to use them . can someone explain me why.
import React from 'react';
import "../style components/Header.css";
import SearchIcon from '#mui/icons-material/Search';
function Header() {
return (
<div className="Header">
<div className="header_left">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/FaceB.png" alt="" />
<SearchIcon/>
<div className="header_input">
<input type="text" />
</div>
</div>
<div className="header_middle"></div>
<div className="header_right"></div>
</div>
)
}
export default Header;
"this is the error"
./src/components/Header.jsx
Module not found: Can't resolve '#mui/icons-material/Search' in 'C:\Users\noushd\Desktop\Clone\facebook-clone\src\components'
The Material UI Icons module is dependant on the Material UI Core to display the icons. So make sure you installed the core module.
These components use the MUI SvgIcon component to render the SVG path for each icon, and so have a peer-dependency on #materialui/core.
https://mui.com/components/icons/#svg-material-icons
And just to add onto what Hamidreza said, you can use spaces in filenames but it's frowned upon as they might be misinterpreted by software that poorly supports them.
I had to install #emotion/react and #emotion/styled to get it working but it used to work without them before .
Solution1:- look at the package.json file material UI version and use the respective material UI.
Solution2:- Install the latest version of Material UI
Related
Just started to learn react, and using the mui library.
I installed the MUI library with
npm install #mui/material #emotion/react #emotion/styled
I also installed the roboto font, and the icons.
Then i made a simple app that should just display MUI button.
App.js
import Button from '#mui/material/Button';
function App() {
return (
<div >
<h2>Hello World!</h2>
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
The three buttons have been copied directly from the library. When I run the app with npm start the page remains empty. The compilation is successful, there are no errors whatsoever. When i remove the buttons, the <h2> Hello World </h2> suddenly renders. When the buttons are left in the code, even the <h2> title disappears.
Why are the components not rendering?
Found the solution.
In my several attempts to get this to work I created multiple apps. Whenever I created the app using npm create-react-app I would then install the MUI library as described above.
The issue was that I did not cd to the app directory before installing the library. After changing directories the Buttons properly rendered.
I have tried this simple code to test the Material UI, when I save the code and run the local host browser it show empty white screen, if I removed the "" it shows the text and the img
import React from 'react';
import AddIcon from '#mui/icons-material/Add';
function Header(props) {
return (
<main>
<div className="header">
<h1>I am a header</h1>
<AddIcon/>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_Logo_2017.svg"
alt="" />
</div>
</main>
);
}
export default Header;
I followed the steps on the Mui website to install the required packages but nothing changed
So after trying different solutions this is what worked for me:
Create the react project using npx create-react-app urprojname
cd to the created project folder
open the terminal and run the 2 following lines to be able to use Material UI v5
npm install #mui/material #emotion/react #emotion/styled
npm install #mui/icons-material
I found a couple of ways to import bootstrap into my project. I'm rather unsure if there is a best practice.
I installed bootstrap and react-bootstrap using npm.
Option 1: Import every component seperately
import Button from 'react-bootstrap/Button'
function App() {
return (
<div className="App">
<Button variant="outline-secondary" id="button-addon1">
Button
</Button>
</div>
);
}
vs. Option 2: Import everything
import * as bs from 'react-bootstrap'
function App() {
return (
<div className="App">
<bs.Button variant="outline-secondary" id="button-addon1">
Button
</bs.Button>
</div>
);
}
My guess:
Option 1 is leaner as it only imports the component I use. But is it the best way to use it? Especially when Prototyping out a quick idea it can get filled with imports quickly or can be a pain to import everything hand by hand.
Any advice is very welcome! Thank you!
Personally I would go with Option 2. Bootstrap's components names are very generic and could be confused with other components.
Importing the specific component from the library rather than importing everything improves the performance while fetching and rendering.
However,
You can also import multiple components from a single import statement
import { Form, Col, Button } from "react-bootstrap";
You can also use the default react-bootstrap syntax to import
It imports dynamically without naming the specific components
import * as ReactBootstrap from "react-bootstrap";
return (
<ReactBootstrap.Button bsStyle="success" bsSize="small">
Button
</ReactBootstrap.Button>
);
So, In terms of performance, multiple components imports or individual component imports are way better than the others.
You can just include the link to the CSS and JS bundle in the public/index.html
You can find the CSS link here -> https://getbootstrap.com/docs/5.0/getting-started/introduction/
Copy the CSS code and paste it into the head tag
You can find the JS bundle here -> https://getbootstrap.com/docs/5.0/getting-started/introduction/
Copy the JS Bundle code and paste it right on top of the end of the body tag. Like this 👇
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> //This is the JS Bundle
</script>
</body>
You can just use the bootstrap class names on className of the component which will be easier to refer on the bootstrap docs.
<div className="d-flex mx-2 bg-dark"></div> //Usage of bootstrap classes
There are default imports (option 1) and named imports (option 2). Generally, the main difference is that with option 1 you import only the component, not the whole library: https://react-bootstrap.netlify.app/getting-started/introduction/#importing-components
You should import individual components like: react-bootstrap/Button
rather than the entire library. Doing so pulls in only the specific
components that you use, which can significantly reduce the amount of
code you end up sending to the client.
import Button from 'react-bootstrap/Button';
// or less ideally
import { Button } from 'react-bootstrap';
I said generally, because you can set up your bundle tool for tree shaking. With tree shaking you remove everything, that is not used in your code, resulting in the same bundle size, as you would import only certain components directly via default imports.
I use option 2, because I like to clip all the imports from the same library. It's also easier for eyes to parse the imports IMO.
hope all good with you.
currently I am working on a new project configuration, I want to use vitejs, antdesign and tailwind , I am using Vite.js react template as I mentioned then I've installed ant design using this command
npm install antd. Then I added these 3 lines in my app.jsx
+ import { DatePicker } from "antd";
+ import "antd/dist/antd.css";
function App() {
return (
<div className="App">
+ <DatePicker />
</div>
);
}
export default App;
and it worked properly, all I want to do now is to change the color theme less variables, I tried searching for modifyvars for vitejs but I failed, also I followed their docs but with vite i don't have webpack configuration file, it only worked with create-react-app template but not tailwind though. hope anyone can help and would i face any more problems if I installed tailwind after that.
I have installed react-bootstrap with:
npm install react-bootstrap bootstrap
command, and successfully imported it:
import Carousel from 'react-bootstrap/Carousel'
<Carousel>
...
</Carousel>
but it's styles didn't applied!
What I need to do to use it correctly?
React-Bootstrap doesn't come with bootstrap CSS automatically - it only produces the corresponding div elements with classes.
If you're using css modules, import the bootstrap css in index.js:
import "bootstrap/dist/css/bootstrap.min.css";
If you're using normal HTML, include bootstrap.min.css in your html file somehow.