I am using Material UI and my goal is to make an Icon button. Therefore I tried this:
import React, { Component } from 'react';
import DoneOutlineSharpIcon from '#material-ui/icons/DoneOutlineSharp';
import IconButton from '#material-ui/core/IconButton'
export class App extends Component {
render() {
return (
<div>
<IconButton> <DoneOutlineSharpIcon style={{color: "green"}}/> </IconButton>
</div>
)
}
}
Additionally, I added the material icons to the index.html like this:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
The Icon is not visible, but pressing F12 in the "Elements" it shows that there is a button.
I am still new to React, so I might have done something stupidly wrong. Can someone tell me what I missed here? And how can I simply place an Icon into a Button?
Related
I'm trying to use Material UI to use buttons in my web app using ReactJS for the frontend. I installed Material UI with the terminal command
npm install #material-ui/core
And my code looks like this:
import React from 'react';
import './Header.css';
import { Button } from '#material-ui/core';
function Header() {
return (
<div className="header">
<div className="headerRight">
<h1>Hi There</h1>
<img
className="headerIcon"
src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg"
alt=""
/>
<div className="button">
<Button>Click Me</Button>
</div>
</div>
</div>
);
}
export default Header;
and the compiler says "Compiled Successfully!" when I hit save, but when I look at the app in my browser, nothing is there at all. When I take out the button, everything else shows up, but when I put the button back in, nothing shows up, and I get a blank screen. I'm really frustrated trying to figure out why the Material UI button does not work. Please help me.
My App.js code looks like this
import './App.css';
import React from 'react';
import Header from './Header';
import Banner from './Banner';
function App() {
return (
<div className="App">
<Header/>
<Banner/>
</div>
);
}
export default App;
Issue for me was that I had installed MUI before jumping into my react ap (cd my-app), so the MUI package was in a parent "Node Modules" directory of my react app.
Deleted the parent Node Modules directory and reinstalled MUI in my react app.
I'm sure this is going to be a very straight forward answer, but I can't for the life of me work out how to get my Gatsby/React site to start at the top of a new page without a scroll transition effect when I click on an internal link.
Example:
On my home page I scroll to the bottom, then click on a link to take me to an 'About Me' page. The About Me Page loads with the browser scroll position still at the bottom of the page and then the window scrolls to the top of the page. This only takes a few milliseconds but when I click on a link I want to start at the top of the page without any transition.
The links are all standard Gatsby Links:
<Link className="" to="/aboutme/">
About Me
</Link>
Thanks!
EDIT
Adding in my layout wrapper, with useScrollRestoration hooks added:
import React from 'react'
import PropTypes from 'prop-types'
import useScrollRestoration from 'gatsby'
import NavBar from './NavBar/NavBar'
import Footer from './Footer/Footer'
import './layout.scss'
const Layout = ({ children }) => {
const aboutMeScrollRestoration = useScrollRestoration(`page-component-main`)
return (
<>
<NavBar />
<main className="bumpdown" {...aboutMeScrollRestoration}>
{children}
</main>
<Footer />
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
I managed to work this out in the end after a lot of Googling. It appears not to be a scrollRestoration issue but a Bootstrap issue. In bootstrap/scss/_reboot.scss there's the following code:
:root {
font-size: $font-size-root;
#if $enable-smooth-scroll {
#media (prefers-reduced-motion: no-preference) {
scroll-behavior: smooth;
}
}
}
This can be turned off either using $enable-reduced-motion: true; or $enable-smooth-scroll: false; in bootstrap overrides which stops the scrolling behaviour when a new page opens.
I'm using the enable-smooth-scrolling:false option as the other option may have further knock on effects.
I created a custom.scss file and imported it into the gatsby-browser.js file. The contents of the scss file is overriding the default value of the scroll-behaviour in bootstrap:
$enable-smooth-scroll: false;
:root {
scroll-behavior: auto !important;
}
#import "node_modules/bootstrap/scss/bootstrap";
This issue is known as Scroll Restoration. #reach/router (from where Gatsby extends its routing) handles it automatically. However, in some cases, it fails, especially when rendering containers that have their own scroll values. To bypass this "issue", Gatsby exposes a useScrollRestoration hook to restore the scroll position. For example:
import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"
export default function PageComponent() {
const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)
return (
<ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
)
}
So, in your destination component (/aboutme/ page), use the useScrollRestoration hook in your outer wrapper to restore the scroll position.
I need to have a background image on my website. I tried using the img tag and this one does work but because I am trying to use Tailwind to have my image styled I would much prefer using the background tag.
This is my current component's code:
import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'
function Home() {
return (
<div className="">
<Header/>
<div style={{ backgroundImage: `url('${houseImg}')` }} />
<HomePageDescr/>
</div>
);
}
export default Home;
Everything renders but the actual background. I tried looking at various things here but no questions/answers helped. Not adding require to the image, nothing.
Anyone encountered the same problem?
Thanks
You need to resize the div. Try setting height and width for the div
I am decently new to react and am now trying to add semantic ui to my website. Every time I try to load the components they show as regular html instead of how semantic ui is supposed to look.
Here is an example of a class I am exporting:
import React, { Component } from "react";
import {Radio} from 'semantic-ui-react';
const RadioExampleToggle = () => <Radio toggle />
class Contact extends Component {
render() {
return (
<div>
<h2>DEMO PAGE</h2>
<p>Just a demo.
</p>
{RadioExampleToggle()}
</div>
);
}
}
export default Contact;
This will show up as a regular radio button which is what I find weird. How do I get it to display the semantic UI versions.
Please try import CSS file from semantic-ui.
import 'semantic-ui-css/semantic.min.css'
Try this:
Put it in your index.js
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
Doing it this way will also help you when your app offers theme switching functionality.
code sample
I'm trying to use this css style to styling my react app. But the css didn't work in my element, how to solve it ?
import React, { Component } from 'react';
import style from './styles/css/bootstrap.css';
class App extends Component {
render() {
return (
<div>
<button className={style['btn', 'btn-primary']}>test button</button>
</div>
);
}
}
export default App;
import style from './styles/css/bootstrap.css';
What are you expecting the import to do? If it is to just include the css, then you don't need to give it a name.
import './styles/css/bootstrap.css';
Should be enough.
style['btn', 'btn-primary']
Styling in react comes in various flavours. I would recommend reading the official documentation for it. Assuming you just want to use the classes: btn and btn-primary, you can just pass them to react as:
<button className="btn btn-primary">test button</button>