I'm using styled components something like this
const FormItem = styled(Form.Item)`
font-size: 16px;
`;
Using Form Item something like this
<FormItem label="System Pressurized">
{getFieldDecorator('systemPressurized')(
<Select defaultValue="" placeholder="Select Type">
<Option value="Yiminghe">yiminghe</Option>
</Select>,
)}
</FormItem>
I've tried changing font size of AntD but it doesn't seem to workout
There are multiple options to override style elements.
You can directly override label elements from global CSS files like:
label {
font-size:16px;
}
Individual element by adding a script to the label element:
<FormItem
label={ <p style={{fontSize:"16px"}}>"System Pressurized"</p> }>
{ getFieldDecorator('systemPressurized')(
<Select defaultValue="" placeholder="Select Type">
<Option value="Yiminghe">yiminghe</Option>
</Select>
)}
</FormItem>
Please override CSS in your code like
$ .ant-form-item-label>label {
font-size: 16px;
}
You can directly override the CSS in global.less file like
& .ant-form-item-label {
& > label {
font-size: 16px;
}
}
You can write JSX for this
<FormItem label = {
<p style={{fontSize: "16px"}}>System Pressurized</p>}>
{getFieldDecorator('systemPressurized')(
<Select defaultValue="" placeholder="Select Type">
<Option value="Yiminghe">yiminghe</Option>
</Select>,
)}
you have two way to style the formItem label
//way one :
//You can override the default css by override below selectors
.form-section .form-group label{
font-size : 20px
//YOUR CUSTOM STYLE
}
// way two :
// You can pass custom component like below :
<FormItem label={<p style={YOURCUSTOMSTYLEOBJECT}>System Pressurized</p>}>
{getFieldDecorator('systemPressurized')(
<Select defaultValue="" placeholder="Select Type">
<Option value="Yiminghe">yiminghe</Option>
</Select>,
)}
</FormItem>
add css:
.ant-form-item-label label{
font-size: 16px;
}
then use it like this
<!-- language: lang-js -->
const formItemLayout =
formLayout === 'horizontal' ?
{
labelCol: {
span: 4,
style: {
"text-align": "left",
"font-size": "12px"
}
},
wrapperCol: {
span: 30,
},
} :
null;
<!-- end snippet -->
//then use it like this
<Form
{...formItemLayout}
layout={formLayout}
form={form}
initialValues={{
layout: formLayout,
}}
>
<Form.Item
label={"Full Name"}
name="username"
id="name"
style={{ display: "flex", flexDirection: "column" }}
defaultValue={name}
onChange={handleChange()}
rules={[
{
required: true,
message: 'Please input your name!',
},
]}
>
<Input />
</Form.Item>
</Form>
Related
I want to alter the font colour of disabled MUI TextField.
It should be black so that it is visible.
Here is code
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
/>
I removed underline for standard text Field. Now I want text color black when it is disabled.
Inspired by Madhuri's solution, you can also use the sx prop without importing styled:
<TextField
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
InputProps={{disableUnderline: true}}
disabled={true}
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "black",
},
}}
/>
You need to use ".Mui-disabled" class to override required css as below,
import TextField from "#mui/material/TextField";
import { styled } from "#mui/material/styles";
const CustomDisableInput = styled(TextField)(() => ({
".MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000",
color: "#000"
}
}));
function App() {
return (
<>
<span>Disabled Input:</span>
<CustomDisableInput
fullWidth
variant="standard"
size="small"
id="id"
name="name"
type="text"
value="your text"
InputProps={{ disableUnderline: true }}
disabled={true}
/>
</>
);
}
Please check demo here - https://codesandbox.io/s/mui-customdisableinput-xl7wv
I tried create the MUI textfield using same code in Codesandbox but everything works fine.
I tried to follow this post but not working
Can anyone give me some ideas of how to fix this issue?
const textfieldUseStyles = makeStyles((theme) => ({
root: {
"& > *": {
margin: "auto",
width: "100%",
},
},
}));
...
const textFieldClasses = textfieldUseStyles();
return (
<form className={textFieldClasses.root}>
<TextField
key="Confirmation Code"
variant="outlined"
id="email"
label="Post title"
name="email"
autoComplete="confirmation code"
value="123"
InputLabelProps={{ shrink: true }}
/>
</form>
)
Updated 1
After I added css class below, it changed to more good UI
.MuiInputLabel-outlined.MuiInputLabel-shrink {
transform: translate(0, -6px);
font-size: 12px;
margin: 0 14px;
background-color: white;
}
What I want is something like this, at least the label is in right position:
makeStyle is deprecated in Mui-v5 !!!
you can change textFiled border and other properties in various ways like:
the sx prop:
<TextField
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '20px' } }} // change border form here
key="Confirmation Code"
variant="outlined"
id="email"
label="Post title"
name="email"
autoComplete="confirmation code"
value="123"
InputLabelProps={{ shrink: true }}
/>
Mui styled component way(using emotion)
import { styled } from '#mui/material/styles'
import TextField from '#mui/material/TextField'
export const StyledTextField = styled(TextField)(() => ({
'& .MuiInputBase-root': {
borderRadius: 20
}
}))
I am trying to make inline form design using ant design but I am not able to make it customised version.
I have attached the code, image of output from the code and what I want form should look like.
Here is the code:
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const layoutInline ={
labelCol: {
sm: {
offset: 0,
span: 20,
},
},
wrapperCol: {
sm: {
offset: 30,
span: 30,
},
},
}
return (
<div style={{width: "70%", padding: "4%"}}>
<div>
<Form
{...layoutInline}
form={form}
layout="inline"
>
<Form.Item label="Full Name" tooltip="This is a required field">
<Input placeholder="Full Name" />
</Form.Item>
<Form.Item
label="Age"
tooltip={{
title: 'Tooltip with customize icon',
icon: <InfoCircleOutlined />,
}}
onChange={updateAge}
value={age}
>
<Input placeholder="input placeholder" />
</Form.Item>
<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
<Select
placeholder="Select an option"
onChange={updateGender}
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
{/* <Form.Item label="Full Name" tooltip="This is a required field">
<p>{gender} {age} {ethnicity} {AST} {platelets} {ASTupper} {ALT} {HBVDNA} {report}</p>
</Form.Item> */}
<Form.Item name="Ethnicity" label="Ethnicity" rules={[{ required: true }]}>
<Select
placeholder="Select an option"
onChange={updateEthnicity}
allowClear
>
<Option value="South-East-Asian">South East Asian</Option>
<Option value="South-Asian">South-Asian</Option>
<Option value="African">African</Option>
<Option value="Other">Other</Option>
</Select>
</Form.Item>
</Form>
</div>
It is coming out on the page like this.
What I want is that should look like this.
Can anyone guide me, how to achieve it?
1 - The value of offset and span follow the rules of Antd Grid Layout system and it cannot be more than 24 (24 columns).
2 - AddinglabelCol and wrapperCol on the Form element will apply the same layout for Every fields. As you'r desired deisgn, each fields has a different layout, so you'll need to apply it on each
3 - layout="inline" on Form means that they will just be all inline
Finally, the layout system on Antd Form is good to have vertically aligned fields. If you want to have a full control of the field display, you have to wrap each field your self and use custom style or Antd Grid columns.
You may need something like this :
https://codesandbox.io/s/form-methods-antd4123-forked-xo3zp?file=/index.js:922-2483
<Form form={form}>
<Row>
{* sm is only a breakpoint, you may need to add some more for better responsive *}
<Col sm={14}>
<Form.Item label="Full Name" tooltip="This is a required field">
<Input placeholder="Full Name" />
</Form.Item>
</Col>
<Col sm={{ offset: 2, span: 8 }}>
<Form.Item label="Age">
<Input placeholder="input placeholder" />
</Form.Item>
</Col>
</Row>
<Row>
<Col sm={8}>
<Form.Item
name="gender"
label="Gender"
rules={[{ required: true }]}
>
<Select placeholder="Select an option" allowClear>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
</Col>
<Col sm={{ offset: 2, span: 8 }}>
<Form.Item
name="Ethnicity"
label="Ethnicity"
rules={[{ required: true }]}
>
<Select placeholder="Select an option" allowClear>
<Option value="South-East-Asian">South East Asian</Option>
<Option value="South-Asian">South-Asian</Option>
<Option value="African">African</Option>
<Option value="Other">Other</Option>
</Select>
</Form.Item>
</Col>
</Row>
</Form>
In my opinion try to avoid in-line style, add className to every component (even from Ant.) then in the CSS play with position (looks like you want flex and margin/padding)
In my React app, I am using a MaterialUI Form Control API TextField. In the Select tag, I am firing a method onClick, but it does fire only after first click. I don't have any hidden CSS applied to these tags. Here is the following snippet:
<FormControl style={{ width: '12em', marginTop: '1em' }} variant="outlined">
<InputLabel htmlFor="outlined-age-native-simple">Select Template</InputLabel>
<Select
native
label="Select-Template"
onClick={this.GetTemplates}
>
{templates.length &&
templates.map(x => (
<option
key={x.template_id}
value={JSON.stringify(x.template_content)}
style={{ border: 'solid' }}>
{x.template_name}
</option>
))}
</Select>
</FormControl>
The function:
GetTemplates = e => {
XRayApi.getTemplates(this.getTemplatesApiResponse);
};
I cannot find out the reason at all. Any help on this?
You should use onChange={this.GetTemplates} in your code to get it working. As per the official API docs of material-ui>select, onClick is not available. Now, your code will become
<FormControl style={{ width: '12em', marginTop: '1em' }} variant="outlined">
<InputLabel htmlFor="outlined-age-native-simple">Select Template</InputLabel>
<Select
native
label="Select-Template"
onChange={this.GetTemplates}>
{templates.length &&
templates.map(x => (
<option
key={x.template_id}
value={JSON.stringify(x.template_content)}
style={{ border: 'solid' }}>
{x.template_name}
</option>
))}
</Select>
</FormControl>
Try onChange instead of onClick in Select.
<Select
native
label="Select-Template"
onChange={this.GetTemplates}
>
I want to display like an error with red color unless there is a selected option.
Is there any way to do it.
For setting a required Select field with Material UI, you can do:
class SimpleSelect extends React.PureComponent {
state = {
selected: null,
hasError: false
}
handleChange(value) {
this.setState({ selected: value });
}
handleClick() {
this.setState(state => ({ hasError: !state.selected }));
}
render() {
const { classes } = this.props;
const { selected, hasError } = this.state;
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl} error={hasError}>
<InputLabel htmlFor="name">
Name
</InputLabel>
<Select
name="name"
value={selected}
onChange={event => this.handleChange(event.target.value)}
input={<Input id="name" />}
>
<MenuItem value="hai">Hai</MenuItem>
<MenuItem value="olivier">Olivier</MenuItem>
<MenuItem value="kevin">Kevin</MenuItem>
</Select>
{hasError && <FormHelperText>This is required!</FormHelperText>}
</FormControl>
<button type="button" onClick={() => this.handleClick()}>
Submit
</button>
</form>
);
}
}
Working Demo on CodeSandBox
Material UI has other types of Select(native) also where you can just use plain HTML required attribute to mark the element as required.
<FormControl className={classes.formControl} required>
<InputLabel htmlFor="name">Name</InputLabel>
<Select
native
required
value={this.state.name}
onChange={this.handleChange}
inputProps={{
name: 'name',
id: 'name'
}}
>
<option value="" />
<option value={"lala"}>lala</option>
<option value={"lolo"}>lolo</option>
</Select>
</FormControl>
P.S. https://material-ui.com/demos/selects/#native-select
The required prop only works when you wrap your elements inside a <form> element, and you used the submit event to submit the form.
this is not related to react, this is pure HTML.
In MUI v5 (2022), it works like this:
const handleSubmit = (e)=>{
e.preventDefault()
// ...
}
return (
<form onSubmit={handleSubmit}>
<Select required value={val} onChange={handleChange} required>
<MenuItem value="yes">Yes</MenuItem>
<MenuItem value="no">No</MenuItem>
</Select>
<Button type="submit">Submit</Button>
</form>
)
As you can see, it works the same way you think it should work, so what your code should probably be similar to this.
But the required prop only works when you wrap your elements inside a element, and you used the submit event to submit the form.
And if you're using <FormControl>, but the required prop on both elements:
<FormControl required>
<Select required>
// ...
</FormControl>