We have some legacy code that I'm working to refactor styling in.
Right now, there are 3+ files (each representing a page within a wizard) with a styling constant at the top of each file feeding into TextFields and Buttons. Each of these constants have mostly the same content.
I'd like to put the common styling in another, separate file and then apply those styles across each page in the wizard that uses them.
Initially, I thought about using themes, but the use case may not be conducive to it. In each of the three files/pages, I'm seeing pairs of TextFields with different styles applied to them:
<div>
<TextField
id="upload-name"
label="Upload Name"
value={this.state.label}
onChange={this.handleChange('label')}
margin="normal"
variant="outlined"
className="form-input"
InputLabelProps={{
shrink: true,
}}
/>
</div>
<div>
<TextField
id="upload-description"
label="Description"
value={this.state.description}
onChange={this.handleChange('description')}
multiline={true}
margin="normal"
variant="outlined"
className="form-input"
InputLabelProps={{
shrink: true,
}}
InputProps={{
classes:{
root: classes.textArea
}
}}
/>
</div>
Specifically, the lower TextField's getting two different classes in two different ways. I've been trying to figure out if there's a way of passing all classes needed from a CSS module but neither the approach above nor root: styles.textArea seem to work.
Related
I was wondering if anybody has encountered any issues with form input elements when using Material UI and custom web fonts (the 'Poppins' web font to be exact)?
It seems that characters are cut off from the input even though a full width (100%) style is applied to the element and parent containers.
It just seems that the input width does not adapt when the input value is updated (this does seem to work for other fonts but not the Poppins font)
Input with Poppins
Input without Poppins
The TextField Markup I have is:
<TextField
label={label}
error={hasError}
helperText={errorText || helperText}
InputProps={{
endAdornment: (
<InputAdornment
position="end"
style={{ marginLeft: 0, marginBottom: 4 }}
>
<CalendarMonth fontSize="small" />
</InputAdornment>
),
}}
/>
It's probably something silly I'm missing, but any pointers in the right direction on this would be much appreciated
<div className="tasklist">
<p>{props.task.task}</p>
<small>{new Date(props.task.createdAt.toString()).toDateString()}</small>
<br />
<i>Assigned By :</i>
<b>{props.task.assigned_by}</b>
<br />
<i>Assigned to :</i>
<b>{props.task.assigned_to}</b>
<br />
<i>status :</i>
<b>{props.task.status}</b>
<button onClick={showUpdateFormhandler}>
<img
onError={()=>{console.log('error occured')}}
src="edittask.png"
alt="update"
style={{ width: "20px", height: "20px" }}
/>
</button>
</div>
The same div is rendering image perfectly in listing tasks but when Iam using this div from users component it isn't loading. I have added css and image is in public folder. This is my first project in react. a task assigning app.
As you stated, that your image isn't loading when you render it from user component. The most possible reason for this could be the path of source of image. The path may be changing considering that you have Users component in a different directory.
It is not easy to predict the accurate error unless I look at entire repository but I think you most probably have the source path error.Try changing the src of the image to correct source when you're rendering it from Users Component
Also , please read minimal reproducable example
I'm building a form with many TextField elements.
In the form, there are other elements than TextField elements along with TextField elements.
The problem is that they look quite different from TextFields.
Take a look at the example below.
https://codesandbox.io/s/material-ui-demo-forked-p8s87?file=/demo.js:488-520
As you can see, InputLabel doesn't work well with the element other than Input, while FormLabel doesn't look like the right alternative to InputLabel.
What I exactly want is to replace Input as Link, other elements staying the same as with Input. What is the best practice to achieve this?
Main difference with InputLabel and FormLabel is that the InputLabel component adds an animation for us. The FormLabel component does not.
There are four different inputs that we can use in Material-UI, InputBase Input OutlinedInput and FilledInput.
The FormControl component in Material-UI is a wrapper class for an input component. It is good to use a form control when you are using any input components in Material-UI, like a checkbox, radio button, or a switch.
Hence it is good practice to use FormControl with TextField if you don't need some animation on your input control in form like "on focus", "leave focus" etc.
For more details understanding refere this link
Why dont you use Button
You can use it like this:
import { Button } from "#material-ui/core";
<FormControl>
<FormLabel shrink>hi</FormLabel>
<Button color="primary" href="/link">hello</Button>
</FormControl>
<FormControl>
<FormLabel shrink>hi</FormLabel>
<Button variant="contained" color="primary" href="/link">hello</Button>
</FormControl>
<FormControl>
<FormLabel shrink>hi</FormLabel>
<Button variant="outlined" color="primary" href="/link">hello</Button>
</FormControl>
You can play around with color & variant but it'll give you a nice look for Link
Personally recommend you to check out Rsuite Library for other such UI components.
I'm trying to make a Headerelement sit next to an Button icon but I cannot make it happen.
Without attempting any Grids listing them like this
<Header as='h4'>Header text</Header>
<Button icon className='transparentButton'>
<Icon name='add'/>
</Button>
makes it look like this - each item on different line:
If I try to make a Grid with one row and two columns there is a massive space between the two and also the header text is wrapped. At least is vertically aligned I guess...
<Grid>
<Grid.Row verticalAlign='middle'>
<Grid.Column>
<Header as='h4'>Header text</Header>
</Grid.Column>
<Grid.Column>
<Button icon className='transparentButton'>
<Icon name='add'/>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
This looks like that:
I'd really love to hear how suggestions on how to make the two items sit next to each other properly. I want to make it look like this:
Example code https://codesandbox.io/s/semantic-ui-react-example-ttnxc (not sure why the Icon is not rendering there though).
Actually I think that Header Component is displaying as block
Just try to edit it's css and make:
display: inline-block;
and it should render successfully
unfortunately your example code didn't load so i couldn't try this but it should work
I just started using react with bootstrap and implemented a navbar. I can see that bootstrap has many functionalities, however I also see that it is limited in functionality, or, it doesn't give as much 'freedom' in terms of customization. I hope I am wrong but here is my example:
<Grid>
<Row className="text-center">
<h1>Our Products</h1>
</Row>
</Grid>
This code renders the <h1> in the middle of the screen no matter your device size. It works perfectly!
<Navbar>
<Navbar.Brand className="text-center">
<a className='menuItem' href="#home">Sample Text</a>
</Navbar.Brand>
</Navbar>
This is supposed to render a navigation bar with the <Navbar.Brand> in the middle of the screen. The problem is that it has no effect!
I also tried to apply style instead of the className, or even define my own className and work with it in a .css file but it never works. Is this a limitation of React Bootstrap?
I have been able to do something like this to put the text in the middle
<Grid>
<Row className="show-grid">
<Col xs={4} md={5}></Col>
<Col xs={4} md={5}>{this.props.children}</Col>
<Col xs={4} md={5}></Col>
</Row>
</Grid>
I would still like to know how to use the className="text-center" to place the <Navbar.Brand> in the center or, any way to customize it.
I think you can change the default text alignment inside a file named "App.css" that comes with React package
I found out that this problem is pretty common and in most cases has no answer (here, tried every solution offered here but didn't work). I found out that the only way to make it work is to define a custom-className and edit it in CSS. Weird is that it doesn't work with inline styling for me!
The code becomes:
<div>
<Navbar>
<Navbar.Brand className="navbar-brand-custom">
<p>Metanice</p>
</Navbar.Brand>
</Navbar>
</div>
with an external css
.navbar-brand-custom {
width: 100%;
text-align: center;
}
I also found out that it will never work if you don't specify the width