如何用import方法使用element ui的js

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用import方法使用element ui的js相关的知识,希望对你有一定的参考价值。

import Vue from 'vue'
import 'element-ui/lib/theme-default/index.css'
import ElementUi from 'element-ui'
Vue.use(ElementUi) // 使用element-ui

/* 要 把element-ui的css和element-ui一起引入进去,如果是单独使用element-ui的某一个组件,需要安装babel-plugin-component 然后在babel里边配置,具体官网上面有,你可以去看一下 */
参考技术A dialog是jquery UI库的一个UI组件。 你要使用dialog。仅仅引入jquery.js是不够的。 jquery只是轻量级的基础框架。 如果你要用jqueryUI的dialog组件。 就要引入jqueryUI的js及相关css样式文件。 依赖关系dialog --> jqueryUI --> jquery本回答被提问者采纳

如何用钩子覆盖材质 ui 样式

【中文标题】如何用钩子覆盖材质 ui 样式【英文标题】:How override material ui style with hooks 【发布时间】:2019-07-16 13:05:53 【问题描述】:

我尝试使用类名创建剪辑到页面顶部的 AppBar 并使用 React Hooks 和 Material Ui 悬停在其他 Drawer 上。全部描述在:https://material-ui.com/demos/drawers/#clipped-under-the-app-bar

所以我们有

const useStyles = makeStyles(theme => (
root: 
    display: 'flex',
    height: '100%',
,
drawer: 
    width: drawerWidth,
    flexShrink: 0,
,
appBar: 
   zIndex: theme.zIndex.drawer + 1,
,
menuButton: 
    marginRight: 20,
    [theme.breakpoints.up('md')]: 
        display: 'none',
    ,
,

));

还有更详细的:

     <div className=classes.root>
                <CssBaseline/>
                <LoadingResults showLoading=showLoadingSpinner/>
                <AppBar position="fixed" className=classes.appBar >
                     ...
                </AppBar>
    ....

问题是使用 className 应用的样式是在元素的最后添加的,因此它不会覆盖原始样式:

class="MuiPaper-root-12 MuiPaper-elevation4-18 MuiAppBar-root-3 MuiAppBar-positionFixed-4 MuiAppBar-colorPrimary-10 mui-fixed Hook-appBar-1b6f20g"

我知道我可以使用内联样式,但想知道我是否可以使用带有钩子的 classNames 来覆盖样式,就像使用“传统”组件方法一样?

这里是沙盒:https://codesandbox.io/s/w7njqorzy7?fontsize=14

发生的情况是,在沙盒中代码可以正常工作(左侧容器上方的应用栏)

但是当同一个项目被下载和编译时就不行了:

查看调试器,样式是内联的。 在沙盒中,钩子位于底部:

在浏览器中,当应用程序通过“运行开始”运行时,它位于顶部:

所以这就是区别,但为什么以及如何解决这个问题?

【问题讨论】:

class 属性中的类顺序与生成的样式无关。重要的顺序是 CSS 类定义出现的顺序(例如样式元素的顺序 &lt;style&gt;...&lt;/style&gt;)。请显示重现您遇到的问题的 CodeSandbox。 我已经用沙盒更新了它。事实证明它在沙盒中的工作方式不同,而不是。 要使用@material-ui/styles,您需要执行引导步骤(material-ui.com/css-in-js/basics/…) 谢谢@JoshWooding。我安装了这个带有新样式的引导文件,但你的评论让我再次研究它。原来它是在material ui组件之后导入的,应该是第一件事。 【参考方案1】:

原来我安装新样式的 bootstrap.js 放错地方了。

import  install  from '@material-ui/styles';

install();

应该在导入任何材质ui组件之前执行。

【讨论】:

【参考方案2】:

您可以使用 classes 属性而不是 classNames 覆盖 material-ui 样式。

例如

<AppBar position="fixed" classes=root: classes.appBar>

这里我使用了root 键来覆盖,还有很多其他的键你可以玩弄。

每个 Material-ui 组件都有一个 api 部分。您将获得那里列出的覆盖键列表。

一些有用的链接-

https://https://material-ui.com/customization/components/#overriding-styles-with-class-names

https://material-ui.com/api/app-bar/

【讨论】:

第一个网址坏了【参考方案3】:

https://material-ui.com/ru/styles/advanced/#makestyles

const useStyles = makeStyles(
  root: , // a style rule
  label: , // a nested style rule
);

function Nested(props) 
  const classes = useStyles(props);
  return (
    <button className=classes.root>
      <span className=classes.label> // 'jss2 my-label'
        nested
      </span>
    </button>
  );


function Parent() 
  return <Nested classes= label: 'my-label'  />

【讨论】:

以上是关于如何用import方法使用element ui的js的主要内容,如果未能解决你的问题,请参考以下文章

Vue如何使用element-ui实现以下功能?

element-ui 的 table 组件 无法设置行高的问题?

如何用python爬虫直接获取被js修饰过的网页Elements?

覆盖element ui 的样式

vue-cli引入element和vant前端ui组件

如何用java实现list转换成json格式