I have a Material Design TopAppBar Component that I want to add icons to. I'm using the RMWC, a React wrapper for Material Design Components.
See code example below:
import {
TopAppBar,
TopAppBarRow,
TopAppBarSection,
TopAppBarTitle,
TopAppBarNavigationIcon,
TopAppBarActionItem
} from '#rmwc/top-app-bar'
import '#material/top-app-bar/dist/mdc.top-app-bar.css';
function AppBar(props) {
return (
<div className='app-bar-container'>
<TopAppBar>
<TopAppBarRow>
<TopAppBarSection alignStart>
<TopAppBarNavigationIcon icon="menu"/>
<TopAppBarTitle>
{props.title}
</TopAppBarTitle>
</TopAppBarSection>
<TopAppBarSection alignEnd>
<TopAppBarActionItem icon="favorite" />
</TopAppBarSection>
</TopAppBarRow>
</TopAppBar>
</div>
)
}
export default AppBar```
In place of the icons is just the text "menu" and "favorites" when rendered.
I'm thinking I need to import material icons or some other icon library but have tried without success.
So it looks like I had to add a style reference to the material icons. Once I added the following in my index.html file the icons appeared:
Related
Whenever I add a tooltip to an SVG (using react-toolip), the tooltip shows twice:
The Code:
<HelpIcon data-tip='This field represents all sales (or revenues) generated by the company.'></HelpIcon>
<ReactTooltip effect='solid' place='left' multiline={true}/>
While using the HelpIcon from #mui:
import HelpIcon from '#mui/icons-material/Help';
import ReactTooltip from 'react-tooltip';
You can use Material UI tooltip also Its easy to manage and also long text can be used easily
import { Tooltip } from '#mui/material';
<Tooltip title='your tooltip title' >
<HelpIcon>
</Tooltip>
To solve this, define the data-for attribute and the id for the regarding tooltip:
<div data-tip='This field represents all sales (or revenues) generated by the company.' data-for='questionMarkToolTip'>
<HelpIcon></HelpIcon>
<ReactTooltip effect='solid' place='left' multiline={true} id='questionMarkToolTip'/>
</div>
So I want to use a Swiper library for react. I have multiple movie elements, and I want to swipe through them. I import it like this:
import Swiper from 'react-id-swiper';
And I use it that way:
<div className="carousel-container">
<Swiper>
{movies.map(movie =>
<MovieItem movie={movie} key={movie.title}/>
)}
</Swiper>
</div>
So it should make a horizontal slider with movie items, but on the page it looks like this:
So it's like I just put all the movies inside of a common div, although when I open the code in the browser, all movies are inside of swiper div with all the classes, so I'm not sure why it doesn't work the way it should. Maybe the problem is because I use .tsx file?
The issue is lack of css/styling.
The documentation on react-id-swiper is old. According to the documentation on the main module it uses (swiperjs) you need to add the styling/css like so:
import "swiper/css";
I've created a sandbox for you to see it working here
Material-UI adds generated style tags to the <header /> which is of course a standard place for styles, however I need my style tags to be added in a different html element.
I'm looking for a way to transition a legacy CodeIgniter PHP application to React. I have a plan but the issue is that this legacy application is using bootstrap which is messing with my React components.
The plan is to reset all styles in a div and render React components in it. something like:
<div class="clearcss">
<div>
<style type="text/css"></style> // material ui style tags
<div id="react-component"></div>
</div>
</div>
Unfortunately because Material ui adds all of its styles to the header Material ui styles are also reset, but if I could change where material ui places style tags then I think I could make it work.
Actually, in JSS documentation I found examples that show how to specify insertion points outside <head />.
Together with Ryan's comment pointing to material ui documentation I was able to achieve what I wanted.
JSS supports two ways of specifying a custom insertion point for styles:
By adding an html comment (e.g. <!-- custom-jss-insertion-point -->). This is only supported for insertion points in the <head>.
By specifying an element (e.g. insertionPoint: document.getElementById("custom-jss-insertion-point")). This approach supports insertion points in the document body.
Here's a working example of what is needed for the second approach:
index.html -- add an element that styles will be inserted after
...
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="custom-jss-insertion-point"></div>
<div id="root"></div>
</body>
...
App.js -- Tell JSS about the custom insertion point
import React from "react";
import { create } from "jss";
import { StylesProvider, jssPreset } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
const jss = create({
...jssPreset(),
// Define a custom insertion point that JSS will look for when injecting the styles into the DOM.
insertionPoint: document.getElementById("custom-jss-insertion-point")
});
export default function App() {
return (
<StylesProvider jss={jss}>
<div className="App">
<Button variant="contained" color="primary">
Hello
</Button>
</div>
</StylesProvider>
);
}
This results in the styles being added as shown in the image below:
If you render the insertion point element using React, you need to ensure that the element exists before you try to call document.getElementById("custom-jss-insertion-point") while configuring JSS. If it is possible to do so, I would recommend rendering the insertion point element outside of React (as in the example) to avoid order-of-operations complications.
Good morning. I have seen many examples of displaying of the predefined icons in a MaterialUI Avatar component. E.g.
h<Avatar>
<BuildIcon />
</Avatar>
but I havent been able to find an example of displaying an icon from a prop field. For instance, I have a prop that specifies I want the build icon, I thought this would work
<Avatar>
<{prop.myIcon} />
</Avatar>
but I get errors. Does anybody know a nice way to display an icon within an Avatar from props?
thanks
Bill
You can set the icon for the Avatar using the children property.
Import MUI components
import Avatar from '#mui/material/Avatar';
import BuildIcon from '#mui/icons-material/Build';
Use the Avatar (and Icon)
You can use the children property to set the icon
<Avatar children={ BuildIcon } />
This is an alternative to the traditional child component
<Avatar>
{ BuildIcon }
</Avatar>
If you pass jsx as prop you have to use only {prop.myIcon}
For example:
<SomeComponent myIcon={<YourSampleIcon />} />
If you pass component you have to use <prop.myIcon /> to render icon:
For example:
<SomeComponent myIcon={YourSampleIcon} />
Hope this helps you.
Edit:
Material-UI has provided tons of icons already in their #material-ui/icons package. You can see all MUI icons here: https://material.io/resources/icons/ and import CammelCase icon name from #material-ui/icons. For example:
// icon name: all_inbox
import AllInboxIcon from '#material-ui/icons/AllInbox';
But there is second approach too. You can import Icon component from #material-ui/core/Icon and then place icon name in it to display icon:
For example:
import Icon from '#material-ui/core/Icon'
...
return <Icon>all_inbox</Icon>;
To get icon displayed you have to add this in your index.html file:<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> to impor Material Icons font.
In Material UI, I want to set borderRadius on my buttons. Passing the style attribute seem to work for FlatButton but not for RaisedButton.
For RaisedButton, the borderRadius is applied to the parent <div> (which is necessary) but not to <button> itself (which is also necessary)
Is this a bug in Material UI? Or is this behaviour intended? If it's intended, then how do I make a RaisedButton with rounded corners?
import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import FlatButton from 'material-ui/lib/flat-button';
export default class MyButtons extends React.Component {
render() {
return (
<div>
<FlatButton label="flat button" style={{borderRadius: '25px'}}/> {/*works*/}
<RaisedButton label="raised button" style={{borderRadius: '25px'}} /> {/*does not work*/}
</div>
);
};
}
This is the intended behaviour, and says so in the docs. For the record, you would never want a style prop to be passed to multiple children as no styles would make sense across all children - and how deep in nesting would you apply them?
But I think you're mixing concerns here. Using style on a component should only ever effect the root element - and that's assuming the developer chose to pass along the style tag, which they did.
But what you're looking to do is not style the component, but style the elements of the component. What you want to do is use a CSS class:
<RaisedButton label="raised button" className="raised-button--rounded" />
.raised-button--rounded,
.raised-button--rounded button {
border-radius: 25px; /* assuming one is not already defined */
}
NB: The developers do not intend for you to change the component styles that they have not specifically exposed. Through this approach, you will run into issues eventually.