I'm trying to customize a single IonSelectOption with a custom CSS class to change the color of one IonSelectOption. I am copy-pasting the code from Ionic's documentation but it still isn't working. The CSS className that I provide to the IonSelectOption does not seem to get passed along to whatever interface that it selected. Hope someone can help me out!
Link to Documentation. This is the code I'm using:
import React from 'react';
import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '#ionic/react';
const options = {
cssClass: 'my-custom-interface'
};
export const SelectOptionExample: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonItem>
<IonLabel>Select</IonLabel>
<IonSelect interface="popover" interfaceOptions={options}>
<IonSelectOption value="brown" class="brown-option">Brown</IonSelectOption>
<IonSelectOption value="blonde">Blonde</IonSelectOption>
<IonSelectOption value="black">Black</IonSelectOption>
<IonSelectOption value="red">Red</IonSelectOption>
</IonSelect>
</IonItem>
</IonContent>
</IonPage>
);
};
and the CSS:
/* Popover Interface: set color for the popover using Item's CSS variables */
.my-custom-interface .brown-option {
--color: #5e3e2c;
--color-hover: #362419;
}
in react, it is className, not class
Related
I tried googling my problem and it is only showing js files and code.i want to display one thing onpress of button but it is not showing up.i want it to be returned not making item invisible even if it is there.i want to popup in same screen like clicking on button a form and different form on clicking another.
import React, { Component } from 'react';
import {
StyleSheet,
Text,StatusBar,
View,Button,Image,
TouchableOpacity,
Alert
} from 'react-native';
class App extends Component {
constructor(props) {
super(props);
//this.sayHello = this.sayHello.bind(this);
}
sayHello=() => {
return(
<View>
{/* //<Text>hello</Text> */}
Alert.alert('it is visible');
</View>
);
}
render(){
return (
<View>
{this.sayHello}
<TouchableOpacity onPress={this.sayHello}><Text>hi </Text></TouchableOpacity>
</View>
);
}
}
export default App;
I made this simple file as i am unable to resolve many errors..in the place of alert i would add a form.it is showing errors if i return more than one component in the function.
Thanks in advance
I think you want to show another view by pressing a button! If that's what you want here is the code with functional Component!
import React, { useState } from 'react'
import { Pressable } from 'react-native';
const App = () => {
const [show, SetShow] = useState(false);
return (
<View>
<Pressable onPress={() => SetShow(!show)}>
{show === false ? <Text>Hi</Text> : <Text>Hello</Text>}
</Pressable>
</View>
);
};
I am trying to use breakpoints with {withStyles} from "#material-ui/styles", but the debugger shows that theme.breakpoints is not defined.
I tried to wrap the component with ThemeProvider but it does not work.
https://codesandbox.io/s/material-demo-shgh7?from-embed
withStyles exported with #material-ui/styles not provide theme props, you'll use import { withStyles } from "#material-ui/core/styles";
Exemplo no code sand box arrumado ai
class app extends Component{
render(){
const {classes} = this.props
return (
<div className={classes.root}></div>
)
}
}
const style = theme => ({
root: {
[theme.breakpoints.up('sm'){ //only show on mobile or small screen
display: 'none'
},
}
})
export default withStyles(style)(app)
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.
In a react-admin SimpleForm component validation is working fine when I click the save button. The field that is required is highlighted and marked red when I click the save button.
I'd like to add a className to the SaveButton as long as the form is invalid. This way I can make it clear to the user that he's not done with the form yet and prevent the user from clicking it.
This is a simplified version of such a SimpleForm.
import {
required,
//...
} from 'react-admin';
const UserCreateToolbar = props =>
<Toolbar {...props}>
<SaveButton
label="user.action.save_and_show"
redirect="show"
submitOnEnter={true}
/>
</Toolbar>;
export const UserCreate = props =>
<Create {...props}>
<SimpleForm
toolbar={<UserCreateToolbar />}
>
<TextInput source="name" validate={[required()]} />
</SimpleForm>
</Create>;
You can create your own SaveButton component, connected to redux, which will get the validation status from the state (check the redux-form documentation) for the form which is always named record-form in react-admin.
Then, you can apply the disabled prop on the button and eventually tweak its styles
Here's my own SaveButton component I came up with. It's working for me. Thanks #Gildas for pointing me in the right direction.
import React from 'react';
import PropTypes from 'prop-types';
import { reduxForm } from 'redux-form';
import { SaveButton } from 'react-admin';
const SaveButtonAware = ({ invalid, ...rest }) => (
<SaveButton disabled={invalid} {...rest} />
);
SaveButtonAware.propTypes = {
invalid: PropTypes.bool,
};
export default reduxForm({
form: 'record-form',
})(SaveButtonAware);
Update. Apparently, this is working too. Not sure why.
import React from 'react';
import PropTypes from 'prop-types';
import { SaveButton } from 'react-admin';
const SaveButtonAware = ({ invalid, ...rest }) => (
<SaveButton disabled={invalid} {...rest} />
);
SaveButtonAware.propTypes = {
invalid: PropTypes.bool,
};
export default SaveButtonAware;
You should first create a customized toolbar and set Save button's disabled element to Toolbars invalid state, as shown below. ( Toolbar always have the state of form)
import * as React from "react";
import {
Toolbar,
SaveButton
} from 'react-admin';
const CustomToolbar = (props) => (
<Toolbar {...props}>
<SaveButton disabled={props.invalid}/>
</Toolbar>
);
export default CustomToolbar;
Then use this customized toolbar in your form like shown below:
<SimpleForm redirect="list" toolbar={<CustomToolbar/>}>
{your form elements}
</SimpleForm>
I'm trying to make a permanent clipped navigation drawer with Material UI as per https://material.io/guidelines/patterns/navigation-drawer.html
Seems that there is a pull request out for this but not yet merged: https://github.com/callemall/material-ui/pull/6878
At this stage I'm trying to override with styles but can not get my left nav (paper) to apply the style marginTop: '50px',
Are there some samples out there on how to achieve this with v1.0.0-alpha.21?
They changed the way you have to override certain styles in v1. The inline styles no longer work. Certain parts of a component can be overridden with a simple className applied to the component. See this link for further details https://material-ui-1dab0.firebaseapp.com/customization/overrides.
Some deeper nested properties of certain components i.e the height of the Drawer can only be accessed by overriding the class itself. In this case the paper class of the drawer element.
This is a simple example
import React, { Component } from "react";
import Drawer from "material-ui/Drawer";
import { withStyles, createStyleSheet } from "material-ui/styles";
import PropTypes from 'prop-types';
const styleSheet = createStyleSheet("SideNav", {
paper: {
marginTop: '50px'
}
});
class SideNav extends Component {
....
render() {
return (
<Drawer
classes={{paper: this.props.classes.paper}}
docked={true}
>
....
</Drawer>
);
}
}
SideNav.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styleSheet)(SideNav);