I cannot override default style of MUI Rating component. No matter what it defaults to medium 24 fontSize, and does not increase it. What had I done wrong?
import { Rating } from '#mui/material';
export const Stars = () => {
return (
<>
<Rating name="size-large" defaultValue={2} size="large" />
<Rating
name="size-large"
value={4.5}
precision={0.5}
sx={{ fontSize: '48px' }}
size="large"
readOnly
/>
</>
);
};
package.json
"dependencies": {
"#emotion/react": "^11.10.6",
"#emotion/styled": "^11.10.6",
"#mui/icons-material": "^5.11.0",
"#mui/lab": "^5.0.0-alpha.115",
"#mui/material": "^5.11.9",
"#tanstack/react-query": "^4.22.0",
"axios": "^1.2.2",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"styled-components": "^5.3.6",
"yup": "^0.32.11"
},
You're probably not calling this component and seeing some other component. Your code has the first stars with a default value of 2, but your screenshot shows the value at 440 / 550.
Or you may have an MUI Ratings style override or global stylesheet preventing the inline sx styling from taking hold.
You can right click Inspect the stars you are expecting to have a font-size: 48px then see what CSS stylesheet it's getting it's actual font-size from.
Using your code and dependencies in a simple sandbox I see the larger stars as expected.
Related
I'm attempted to develop a new feature for my blog, that is a Markdown editor for writing articles.
I chosed #tailwindcss/typography and markdown-it to do that, so this is my whole dependencies:
package.json
{
"dependencies": {
"firebase": "^9.0.0-beta.7",
"markdown-it": "^12.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#tailwindcss/typography": "^0.4.1",
"autoprefixer": "^10.3.2",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"dotenv-webpack": "^7.0.3",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"postcss-loader": "^6.1.1",
"style-loader": "^3.2.1",
"tailwindcss": "^2.2.7",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
}
}
Below code is the component for this feature, including a editing area and a preview area. However, it didn't work.
When I run this code, it is rendered out like this, without typographing the <h1> tag.
However, if I repalce md.render(markdown) with <h1>hello</h1>(the markdown-it's rendering result), it seems "work", looking like this.
Editor.jsx
import React, { useState } from "react";
const md = require("markdown-it")('commonmark');
const Editor = () => {
const [markdown, setMarkdown] = useState("# hello");
const onTextChange = (e) => {
setMarkdown(e.target.value);
}
return (
<div>
<form>
<textarea onChange={(e) => onTextChange(e)}>
{markdown}
</textarea>
</form>
<div id="preview" className="prose">
{md.render(markdown)} {/* <h1>hello</h1> */}
</div>
</div>
)
}
export default Editor;
Why these things happened? and how can I make it run with expections?
use react-markdown instead of markdown-it
here is an example:
import ReactMarkdown from "react-markdown";
<div className="prose">
<ReactMarkdown>{markdown}</ReactMarkdown>
</div>
it will render the provided content as DOM in the page, and Tailwind/typography perfectly styles those elements.
Tried every possible solutions I found in internet. I upgraded all the dependencies and packages using yarn - below from package.json
"dependencies": {
"#date-io/date-fns": "^1.3.13",
"#date-io/moment": "^1.3.13",
"#material-ui/core": "^5.0.0-beta.2",
"#material-ui/icons": "^5.0.0-beta.1",
"#material-ui/lab": "^5.0.0-alpha.41",
"#material-ui/pickers": "^4.0.0-alpha.12",
"#material-ui/styles": "^5.0.0-beta.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"date-fns": "^2.22.1",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
}
Before upgrading packages I used:
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from '#material-ui/pickers';
After then I imported these:
import LocalizationProvider from '#material-ui/lab/LocalizationProvider';
import AdapterDateFns from '#material-ui/lab/AdapterDateFns';
and tried below code:
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Grid container justifyContent="space-around">
<DatePicker
disableToolbar
variant="inline"
format="DD/MM/yyyy"
margin="normal"
label="Date"
name="date"
value={values.date}
onChange={(date) => handleInputChange(convertToDefault(date))}
/>
</Grid>
</LocalizationProvider>
Can you help me out? It's quite hassle :/
use this version works fine for me...yarn add #material-ui/core#4.11.4 #material-ui/pickers
"#material-ui/core": "4.11.4",
"#material-ui/pickers": "^3.3.10",
- import { fade } from '#material-ui/core/styles';
+ import { alpha } from '#material-ui/core/styles';
const classes = makeStyles(theme => ({
- backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+ backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
}));
Hi I don't think it's a part of #material-ui/pickers any more.
You can check this https://github.com/mui-org/material-ui-pickers/issues/2157
For me its working fine with exact these version. Use the exact same versions and thanks me later. If it not allowed you installation then use --force flag.
"#material-ui/core": "^4.11.4",
"#material-ui/pickers": "^3.3.10",
You cannot use 'fade' from material-ui anymore, as this is deprecated. You can use 'alpha' instead.
I am trying to use the material UI snackbar to show pop up errors in my react application.
I am using a container view. In that view, it does some stuff and errors can be thrown. If it does get an error, I want to render my custom snackbar component.
This is my ErrorPopup component:
import React from 'react';
import { Snackbar } from '#material-ui/core';
import MuiAlert, { AlertProps } from '#material-ui/lab/Alert';
function Alert(props: AlertProps) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
interface ErrorProps {
message: string;
}
export default function ErrorPopup(props: ErrorProps) {
const [open, setOpen] = React.useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<div>
{props.message !== '' ? (
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} color="error">
{props.message}
</Alert>
</Snackbar>
) : (
''
)}
</div>
);
}
In my main view, I call this component like so:
<ErrorPopup message={this.state.errors} />
What seems to happen is I get errors that seem to me to indicate something about the WithStyles + typescript issue crops up, but I am out of my depth to fully understand what is going on. I just expected it to work as all my material UI stuff has worked up until now.
I have tried a couple of quick cut n paste run n gun type fixes off the net (as you do), but I clearly don't know what exactly is going on, so I need to at least start there.
Here is a screen grab:
With styles errors perhaps?
First off, is this approach to showing the errors ok?
Secondly, can anyone point me in the right direction here?
Frustratingly, I just ran an npm update on my project, and things started to work.
For anyones reference, my dependencies in package.json
"dependencies": {
"#material-ui/core": "^4.8.3",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.39",
"#types/pouchdb": "^6.4.0",
"#types/react-router-dom": "^5.1.3",
"clsx": "^1.0.4",
"highcharts": "^7.2.1",
"highcharts-react-official": "^2.2.2",
"pouchdb": "^7.1.1",
"pouchdb-find": "^7.1.1",
"pubnub": "^4.27.3",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"request": "^2.88.0",
"typescript": "^3.7.4"
},
Whilst this solves my original problem getting it working, is this the right approach?
Cheers
Hi I am new to using material-ui. I am having issues when using material-ui-next.
I've done some research and removed the packages and reinstalled them. However, I keep getting the same error with 'withStyles'
Playing around with tables and/other components.
However I am getting this error: Module 'material-ui/styles' has no exported members 'withStyles'
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
const styles = {
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
function ButtonAppBar(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="title" color="inherit" className={classes.flex}>
Title
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
ButtonAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(ButtonAppBar);
This is my package.json:
"dependencies": {
"axios": "^0.18.0",
"material-ui": "^1.0.0-beta.39",
"material-ui-icons": "^1.0.0-beta.36",
"material-ui-next": "^1.0.0-beta.39",
"material-ui-next-types": "^1.0.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-ionicons": "^2.1.6",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tap-event-plugin": "^3.0.2",
"redux": "^3.7.2"
},
I was previoulsy using material ui original version. Not material-ui-next. As I am trying to migrate I am also receiving this error. I was hoping to see if anyone could point me in the right direction and/or let me know what I am doing wrong.
"Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports."
i was having issues but my path was wrong (using Beta.44) i just changed
import {StyleRules, withStyles, WithStyles} from 'material-ui/styles';
to
import {StyleRules, withStyles, WithStyles} from 'material-ui/styles/index';
this is a good resource
https://medium.com/#liangchun/integrating-material-ui-next-with-your-react-typescript-project-80847f7eab64
Your package.json dependencies should look like this:
"dependencies": {
"axios": "^0.18.0",
"material-ui": "^1.0.0-beta.33",
"material-ui-icons": "^1.0.0-beta.17",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-ionicons": "^2.1.6",
"react-redux": "^5.0.7",
"react-scripts": "1.1.1",
"react-tap-event-plugin": "^3.0.2",
"redux": "^3.7.2"
}
I removed the material ui packages with next in their names.
The issue is with the reactstrap cards: https://reactstrap.github.io/components/card/
Using reactstrap components like Card, etc is not working.
Component: Version I
import React, { Component } from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap';
class MoviesIndex extends Component {
render() {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="" alt="Movie Poster" />
</Card>
</CardDeck>
);
}
}
export default MoviesIndex;
Output: *It works fine without any errors.
But when I try to use the rest of the components from reactstrap. It throws errors on console.
Component: Version II
import React, { Component } from 'react';
import { Card, Button, CardImg, CardTitle, CardText, CardDeck, CardSubtitle, CardBody } from 'reactstrap';
class MoviesIndex extends Component {
render() {
return (
<CardDeck>
<Card>
<CardImg top width="100%" src="" alt="Movie Poster" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</CardDeck>
);
}
}
export default MoviesIndex;
Output:
package.json
{
"name": "client",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.17.1",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-transition-group": "^2.2.1",
"reactstrap": "^4.8.0",
"redux": "^3.7.2",
"redux-promise": "^0.5.3"
}
}
I am not able to debug this issue. Please help! TIA.
The components such as CardBody, etc are not available in v4.8.0.
Upgrading to latest release (reactstrap v5.0.0-alpha.4) resolves this issue!
npm install --save reactstrap#5.0.0-alpha.4
Refer to the issue that I created on reactstrap#github for more details:
https://github.com/reactstrap/reactstrap/issues/730
This looks like a typo here:
renderMovies() {
return _.map(this.props.movies, movie => {
Missing )
Try
_.map(this.props.movies, movie) => {
If that doesn't do it, put console.log() after everything to see where it becomes undefined.
This type of error usually results from something not being exported correctly or something being null/undefined due to data missing, etc.
This is a good opportunity for me to recommend using ES Lint, so you can gain extra help 24/7 from the passive display of errors. Check it out if you aren't using it. It's absolutely worth looking into and using.
I won't recommend any specific linting configs in here. That is out of scope of this help. ES Lint will underline code errors such as the missing ) with a red underline, so you will experience less of this kind of thing :)