I have a local svg files I downloaded from ionicons website.
I'm trying to change their font size and color, but nothing works.
I tried with img tag and change in the css file, didn't work.
I tried with IonIcon, which also does not work.
This is what I have right now:
const AppHeader = () => {
return (
<div className="header">
<div className="iconsContainer">
<IonIcon src={searchIcon} size="36px" color="white"></IonIcon>
<IonIcon src={cartIcon} size="36px" color="white"></IonIcon>
</div>
</div>
);
};
I also couldn't find anything about IonIcon in Ionic's website and IonIcon's go to definition in VSCode does not work for some reason.
The svg does display, but I can't change the size and color.
Use it like this
<IonIcon icon={searchIcon} style={{fontSize:32, color: 'white'}}/>
Did you import IonIcon like that:-
import { IonIcon } from "#ionic/react";
If you are trying to use ionic icons you need to import the name as well:-
import { search } from "ionicons/icons";
Example with SVG/Images
<IonIcon src="/assets/icons/searchIcon"/>
Example with ionic icons
<IonIcon icon={search} style={{fontSize:36, color: 'white'}} />
Related
So, I am using react with MUI (latest version), but the custom CSS is not working as in console. It is showing that.
makestyles is no longer exported from #mui/material/styles ,instead try this #mui/styles
But after using it, it's raising an error which is.
Failed to resolve import "#mui/styles" from "src\component\leaderboard.jsx". Does the file exist?
Here is my code.
import React from 'react'
import Container from '#mui/material/Container'
import Button from '#mui/material/Button'
import {Grid} from '#mui/material'
import {Typography} from '#mui/material'
import {makeStyles} from '#mui/material/styles'
const useStyles = makeStyles({
btnLeader: {
margin: '1rem',
},
})
const Leaderboard = () => {
const classes = useStyles()
return (
<Container align='center'>
<Typography
variant='h4'
align='center'
fontFamily='revert-layer'
color='black'
gutterBottom>
Leaderboard
</Typography>
<Grid
container
spacing='5m'
justifyContent='center'>
<Grid item>
<Button
variant='contained'
className={classes.btnLeader}
align='center'>
Register
</Button>
<Button
variant='outlined'
align='center'>
Top Gainers
</Button>
</Grid>
</Grid>
</Container>
)
}
export default Leaderboard
It looks like you are using an outdated version of Material-UI. The makeStyles API has been moved to a new package #material-ui/styles in the latest version. Try installing and importing like that:
npm install #material-ui/styles
import { makeStyles } from '#material-ui/styles';
Also, make sure that the #material-ui/styles package is installed in your project and the import path is correct.
If you are still encountering an error, make sure that you have installed the latest version of #mui/styles in your project. First try to run that.
With NPM
npm install #mui/styles
Or, with yarn
yarn add #mui/styles
Then try to use that.
import { makeStyles } from '#mui/styles';
Here is the official documentation:- MUI Material. Please read this first for better understanding.
The things are that #mui/styles is not compatible with React.StrictMode or React 18. And #mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the #mui/material any more, deprecated in v5.
makeStyle is deprecated in MUI v5. Instead you can use styled, or the very easy to use sx-prop.
styled
import { styled } from "#mui/material/styles";
import { Button } from "#mui/material";
const StyledButton = styled(Button)({
margin: "1rem",
});
export default function Test() {
return <StyledButton variant="contained">styled button</StyledButton>;
}
sx-prop
import { Button } from "#mui/material";
const classes = {
btnLeader: {
margin: "1rem",
},
};
export default function Leaderboard() {
return (
<Button variant="contained" sx={classes.btnLeader}>
sx prop button
</Button>
);
}
I have a custom spinner that is currently using keyframes like so:
import { keyframes } from "#mui/system";
...
const keyframeSpinner = keyframes`
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
`;
...
<Box
sx={{
animation: `${keyframeSpinner} 1s linear infinite`,
}}
/>
...
I don't want to import #mui/system and I don't want to use styled components.
So, I'm trying to find a solution where I can uses pure css or another solution that I'm unaware of.
You can easily apply in-line CSS styles to components using emotion, which is also used by MUI.
For example, here is the css prop from emotion being used to customize background-color and hover on a div. The code you write in the css prop can be pure CSS.
import { css, jsx } from '#emotion/react'
const color = 'darkgreen'
const customCss = css`
background-color: hotpink
&:hover { color: ${color} }
`
render(
<div css = {customCss}>
This div has a hotpink background.
</div>
)
My simple NextJS page looks like this (results can be viewed at https://www.schandillia.com/):
/* eslint-disable no-unused-vars */
import React, { PureComponent, Fragment } from 'react';
import Head from 'next/head';
import compose from 'recompose/compose';
import Layout from '../components/Layout';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
const styles = {
root: {
textAlign: 'center',
paddingTop: 200,
},
p: {
textTransform: 'uppercase',
color: 'red',
},
};
class Index extends PureComponent {
render() {
const { classes } = this.props;
const title = 'Project Proost';
const description = 'This is the description for the homepage';
return (
<Fragment>
<Head>
<title>{ title }</title>
<meta name="description" content={description} key="description" />
</Head>
<Layout>
<p className={classes.p}>amit</p>
<Button variant="contained" color="secondary">
Secondary
</Button>
</Layout>
</Fragment>
);
}
}
export default withStyles(styles)(Index);
I am importing a bunch of components off the #material-ui/core library to style my items. I also have a local style definition assigned to a style constant.
What seems to be happening here is that my style isn't getting rendered on the server which is why the files being served upon load are sans-style. And then the CSS gets rendered by the client-side code. As a result, there's a flash of unstyled content that lasts almost a second, long enough to be noticable.
Any way to fix this? The entire codebase is up for reference at https://github.com/amitschandillia/proost/tree/master/web.
I ran a similar problem when tried to make a production build of my app, that uses material-ui. I manage to solve by adding a JSS Provider like this:
import JssProvider from "react-jss/lib/JssProvider";
class App extends Component {
render() {
<JssProvider>
*the rest of your material-ui components*
</JssProvider>
}
}
Here's the solution - https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js .
Basically, all you need to do is to sync server-side class names with client-side. The link above shows what you need to do to fix that issue.
Instead of doing this everywhere:
<Button variant="contained" color="primary"
style={{textTransform: "none"}}
>
Description
</Button>
I just want to write:
<Button>
Description
</Button>
Can I use theme overrides to do this and what would that look like?
Note that I'm trying to override both Material-UI properties and CSS styles. I want to do this globally (i.e. not using withStyles() stuff everywhere).
Or can this only be done by defining some kind of new AppButton component?
Currently using material-ui 3.2.2
You can do this with global overrides for your theme.
Documentation is here https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type
Doing it this way will still allow you override the variant on a per component basis as well.
const theme = createMuiTheme({
props: {
// Name of the component ⚛️
MuiButton: {
// The properties to apply
variant: 'contained'
},
},
});
Here's an alternate way to do this, without defining a new component.
Custom components can be awkward when used with Material-UI's JSS styling solution with Typescript. I've found it difficult to define WithStyle types when combining style types from the shared component and the thing using it.
Instead of defining components, it's possible to define sets of default properties that you then apply with the spread operator.
Define and export a standard set of shared props somewhere out in your app:
import {LinearProgressProps} from "#material-ui/core/LinearProgress";
export const linearProps: LinearProgressProps = {
variant:"indeterminate",
color:"primary",
style:{height:"2px"},
};
Then use those props in your app:
<LinearProgress {...linearProps} />
This is then easy to override with custom properties, custom inline styles or JSS generated styles:
<LinearProgress {...linearProps} className={classes.customProgress}
color="secondary" style={{...linearProps.style, width: "100%"}} />
For anyone finding this question, assuming there is no Material-UI way to do this, here's my custom button component.
import * as React from "react";
import {Button} from "#material-ui/core";
import {ButtonProps} from "#material-ui/core/Button";
export class AppButton extends React.Component<ButtonProps, {}>{
render(){
let {style, ...props} = this.props;
return <Button {...props} variant="contained" color="primary"
style={{...style, textTransform: "none"}}
>
{this.props.children}
</Button>
}
}
AppButton.muiName = 'Button';
I have a TouchableHighlight, inside of it, I want to put an image exactly the same as xf138 in FontAwesome which looks like an arrow:
http://fontawesome.io/icon/chevron-circle-right/
I don't know how to display it, I tried to use Text inside of the TouchableHighlight, but I get "Unexpected token" error in below code:

And I wonder which fontFamily I should use inside myStyle, it seems there is no FontAwesome in the fontFamily of react native.
You can include the react-native-fontawesome module in your project and then use it as such (from https://github.com/entria/react-native-fontawesome):
import FontAwesome, { Icons } from 'react-native-fontawesome';
...
render() {
return (
<View>
<TouchableHighlight>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>
<FontAwesome>{Icons.chevronLeft}</FontAwesome>
Text
</Text>
</TouchableHighlight>
</View>
);
},