material-ui | 易学教程

Image on Material UI CardMedia

阅读更多关于 Image on Material UI CardMedia

问题 I´m having some troubles on getting an image from props on a CardMedia image: <Card className={classes.card}> <CardMedia className={classes.img} image={this.props.recipe.thumbnail} /> <CardContent className={classes.content}> <Typography gutterBottom variant="headline" component="h2"> {this.props.recipe.title} </Typography> <Typography component="p"> {this.props.recipe.ingredients} </Typography> </CardContent> <CardActions> <Button href={this.props.recipe.href} Recipe </Button> </CardActions>

Material UI inline style not working

阅读更多关于 Material UI inline style not working

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

How to get Material-UI Drawer to 'squeeze' other content when open

阅读更多关于 How to get Material-UI Drawer to 'squeeze' other content when open

问题 If anyone is familiar with css and Material UI any help with this would be much appreciated. Basically I'm trying to implement a Material UI Drawer component which when opened doesn't just slide out over the top of the page content, but rather the page content conforms around the drawer i.e squeezes or expands. I'm using bootstrap rows and containers in my project, but I have no clue how I'd use them to achieve this. Here's how my component is laid out: <div> <AppBar onLeftIconButtonTouchTap=

changing font family of all material-ui(version 1) components

阅读更多关于 changing font family of all material-ui(version 1) components

问题 Can we change the font family of material-ui components with less code. I have tried many ways but still, I can't able to do it. I have to change the font family individually which is really a lot of work. Are there any other ways to do that? 回答1: You can change the font in material-ui@next library doing the following. Suppose in your <App /> which is defined like the following // Material UI import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; const App = () => (

Bootstrap vs Material UI for React?

阅读更多关于 Bootstrap vs Material UI for React?

问题 I have been using both in my projects and sometimes I find the need to use a Material UI component within a bootstrap component and the UI displays as I would expect. I have been advised though not to use this approach. Is there any reason why since both are using the grid and can be flexed? 回答1: I tend to be verbose so I'll put the concise answer up top here: Conclusion: Whoever said it was bad to use both might just be expressing their opinion, in reality saying it's bad to use both really

Changing the URL in react-router v4 without using Redirect or Link [duplicate]

阅读更多关于 Changing the URL in react-router v4 without using Redirect or Link [duplicate]

问题 This question already has answers here : Programmatically Navigate using react-router (8 answers) Closed 2 years ago . I'm using react-router v4 and material-ui in my React app. I was wondering how to change the URL once there is a click on a GridTile within GridList. My initial idea was to use a handler for onTouchTap . However, the only way I can see to redirect is by using the components Redirect or Link . How could I change the URL without rendering those two components? I've tried this

Material UI Menu using routes

阅读更多关于 Material UI Menu using routes

I am toying with material-ui. I implemented LeftNav using routes, but I could not find a way to get IconMenu, or Menu working with links or routes. Anyone can point me to a good source / tutorial? The documentation falls short, and both components seem not to support 'menuItems' as property as LeftNav does. 2016 December Edit: the linkButton prop is deprecated , you will get a warning: Warning: Unknown props `linkButton` on <a> tag. So simply remove the prop: <MenuItem containerElement={<Link to="/profile" />} primaryText="Profile" leftIcon={ <FontIcon className="material-icons">people<

Use components from two versions of the same library (npm / Material UI in my case)

阅读更多关于 Use components from two versions of the same library (npm / Material UI in my case)

I'm using the latest stable version of Material UI in my production React app. I need the updated Data Tables component, which is currently in Material UI's unstable alpha branch. I don't want to upgrade my whole app with npm i material-ui@next because of the numerous breaking changes. How can I access the alpha library without upgrading my whole library? Can I install two versions of MUI? Can I call on the alpha API without installing it through NPM? Thanks in advance. After some googling, found this . To use both versions: yarn add material-ui@latest yarn add material-ui-next@npm:material-ui

Hide Appbar on Scroll Flutter?

阅读更多关于 Hide Appbar on Scroll Flutter?

问题 Consider this image. As you can see it has an appbar and the appbar has Tabbed buttons. Am trying to animate the appbar so that it hides on scrollup and leaves only the Tab Buttons showing and on scrollup the appbar apears. Please help me out. Sorry for bad english and not American neither am I English 回答1: If I understood you correctly, following code should make the app bar hide on scroll while TabBar remains visible: new Scaffold( body: new NestedScrollView( controller:

How to use materialize-css with React?

阅读更多关于 How to use materialize-css with React?

I have a Meteor/React project, using ES6 modules. I've installed materialize-css using npm, but I'm not sure how to actually use the Materialize classes in my JSX code. What am I supposed to import from materialize-css? Or do I just have to include the CSS in my main index.html file? I mostly want it for the grid system, as I'll be using material-ui for the actual UI components. Since I use CSS Modules, importing materialize css would scope it to that particular component. So I did the following Step 1) install materialise npm install materialize-css@next Step 2) in index.html <!--Import