对于基于Material UI(React)并使用Webpack构建的渐进式 Web应用程序,如何正确包含Roboto字体,以便应用程序不依赖于Google服务器,并且字体也可以脱机工作？
关于Roboto字体存在类似的Material UI问题,但仍依赖于Google提供的字体文件.
我发现了一个提供Roboto字体文件的NPM包,但是我不知道如何提供这些文件,因为提供了很多样式和字体格式,我不知道Material UI真正需要什么样的样式.此外,仅通过@import导入这些字体系列似乎存在性能问题.
那么,将正确的 Roboto文件与我的应用程序捆绑在一起的优秀而简单的解决方案是什么？
我正在尝试从 导入一个盒子组件@mui/material/Box。我已经使用以下命令安装了 Material-UI 5 npm i @mui/material。但出现这个错误，Module not found: Can't resolve '@emotion/react' in 'E:\frontend\node_modules\@mui\styled-engine'
这是我的代码。
import * as React from 'react';
import Box from '@mui/material/Box';
export default function WhiteSpace() {
return (
<div style={{ width: 200 }}>
<Box
component="div"
sx={{
whiteSpace: 'nowrap',
my: 2,
bgcolor: 'background.paper',
}}
>
White Space Nowrap. White Space Nowrap.
</Box>
<Box
component="div"
sx={{
whiteSpace: 'normal',
my: 2,
bgcolor: 'background.paper',
}}
>
White Space Normal. White Space Normal.
</Box>
</div>
);
} …我正在尝试更改 Select 输入的值，然后在控制台中收到以下警告。
index.js:1446 警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控制（反之亦然）。决定在组件的生命周期内使用受控或非受控输入元素。
但我只以正确的方式更新状态，这是我的代码
<Select
value={props.selectedService}
onChange={props.handleSelectChange}
inputProps={{
name: 'selectedService',
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value="Dry Cleaning">Dry Cleaning</MenuItem>
<MenuItem value="Washing and Ironing">Washing and Ironing</MenuItem>
<MenuItem value="Rolling">Rolling</MenuItem>
</Select>
handleselectchange 功能就在这里。
handleSelectChange = ({target: {name,value}}) => {
console.log(name);
console.log(value);
this.setState({
serviceRequest: {
selectedService: value
}
});
}
状态对象声明如下
state = {
open: false,
selectedDate: new Date(),
selectedTime : new Date(),
mailDetails :{
name:"",
email:'',
message:''
},
serviceRequest: {
name: '',
email: '',
mobileNumber:'',
address:'',
landMark:'',
selectedService:''
}
}; …我刚刚开始使用 Material UI 版本 5。最初为了使用我的自定义主题样式，我会使用 makestyles，但似乎在 v.5 中不起作用。我的主题位于其自己的组件上，为了导入这些主题，我使用{createTheme}而不是旧的{createMuiTheme}. 我像往常一样将主题导入到父组件中，并将其设置为<ThemeProvider theme{theme}></ThemeProvider>.
现在，在我的另一个组件上，我再次尝试使用 useStyles，但它不起作用，因为它没有在版本 5 中使用。我很难弄清楚如何转换它，以便它可以在版本 5。以下是我正在编写的一些未完成的代码：
const useStyles = makeStyles((theme) => ({
logo: {
height: "8em",
marginLeft: "0.2em",
},
tabContainer: {
marginLeft: "auto",
},
tab: {
...theme.typography.tab,
minWidth: 10,
marginRight: "50px",
opacity: 1,
"&hover": {
color: theme.palette.common.purple,
textDecoration:"none",
},
},
}));
export default function Navigation(props) {
const classes = useStyles();
const [value, setValue] = useState(0);
const handleChange = (e, value) => {
setValue(value);
};
const …我一直想知道Material-UI React 库中的CssBaseline类是做什么的，但我似乎无法在任何地方找到答案，而且我链接的页面并没有对类的作用做太多解释。这里有人知道这个组件应该做什么吗？
我坚持用redux连接器导出material-ui样式.这是我的代码:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Drawer from 'material-ui/Drawer';
import { withStyles } from 'material-ui/styles';
import PropTypes from 'prop-types';
const mapStateToProps = state => ({});
const reduxConnector = connect(mapStateToProps, null);
const styles = theme => {
console.log(theme);
return ({
paper: {
top: '80px',
boxShadow: theme.shadows[9]
},
});
};
class Cart extends Component {
render() {
const { classes } = this.props;
return (
<Drawer
open
docked
anchor="right"
classes={{ paper: classes.paper }} …我想将Autocomplete组件用于输入标签。我正在尝试获取标签并将它们保存在状态中，以便稍后将它们保存在数据库中。我在反应中使用函数而不是类。我确实尝试过onChange，但没有得到任何结果。
<div style={{ width: 500 }}>
<Autocomplete
multiple
options={autoComplete}
filterSelectedOptions
getOptionLabel={(option) => option.tags}
renderInput={(params) => (
<TextField
className={classes.input}
{...params}
variant="outlined"
placeholder="Favorites"
margin="normal"
fullWidth
/>
)}
/>
</div>;
例如，styled-components您可以执行以下操作：
const Div = styled.div`
background: ${props => props.primary ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
`;
render(
<section>
<Div>Normal</Div>
<Div primary>Primary</Div>
</section>
);
您能否使用 Material-UI v5 实用程序获得相同的结果，而不像styled() 文档styled中的示例那样向全局主题对象添加覆盖？
我已经安装了 material-ui/lab 以便用户使用警报组件，但是每当我导入它时：import Alert from '@material-ui/lab/Alert';它无法编译并抛出此错误：
./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js
Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'.
所以我试着用谷歌搜索这个问题，发现了另一个关于material-ui/lab/AutoComplete组件的问题（这个问题正是这个问题），接受的答案是将 material-ui/core 更新到版本 4.9.9，看起来它对问这个问题的人有用，但遗憾的是不适合我，我有所有已安装的 material-ui 东西的这个版本：
"@material-ui/core": "^4.9.9",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.48",
所以现在我问你们是否有另一种方法可以解决这个问题，谢谢
由于某种原因，我无法调用 useStyles，因为它会出错：
This expression is not callable.
Type 'never' has no call signatures.ts(2349)
const useStyles: never
这是完整的代码：
import { makeStyles, Theme } from "@material-ui/core";
import IconButton from "@material-ui/core/IconButton";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import { ReactComponent as HeaderLogo } from "../../images/logo.svg";
const useStyles = makeStyles((theme: Theme) => ({
root: {
backgroundColor: theme.palette.VampirismBlack.main,
}
}));
const Header = (): JSX.Element => {
const classes = useStyles();
return (
<AppBar position="static">
<Toolbar variant="dense">
<HeaderLogo width="125" height="75" />
<IconButton>
Home …material-ui ×10
reactjs ×9
javascript ×4
node.js ×1
npm ×1
react-redux ×1
redux ×1
roboto ×1
typescript ×1
webfonts ×1
webpack ×1