This is how my problem looks like (see the ring) :
View Image
Using the Chrome's inspector found that it is related to --tw-ring-shadow.
So I tried adding classes like ring-0 and ring-offset-0 (as you can see below) but it didn't work!!
import { TextField } from "#mui/material";
function ContactForm(): JSX.Element {
return (
<div className="form-container pt-12 flex flex-col items-center">
<div className="input-row">
<TextField
className="ring-offset-0 ring-0"
label="First Name"
variant="outlined"
/>
</div>
</div>
);
}
export default ContactForm;
Do you have any idea for how can I get rid of this annoying border that overlaps the input field??
I'd appreciate your help!
You could try overriding the Tailwind CSS variable for input fields by adding the following in your application's CSS:
input {
--tw-ring-shadow: 0 0 #000 !important;
}
Alternatively...we can't see the code generated by <Textfield> to ensure that your Tailwind utility classes are being applied correctly to the input element, but if they are not, you could try targeting the <input> field directly using #apply in your CSS file:
input {
#apply ring-offset-0 ring-0
}
Related
I've successfully implemented the Semantic UI React Dropdown like this:
<div>
<Form.Label>Search and Select Company</Form.Label>
<Dropdown
name='company'
data-testid='companiesDropdown'
placeholder='Ex. Goodyear'
className={classes.errorState}
fluid
search
searchInput={{autoFocus: true}}
selection
options={companies
? companies.map((company, key) => {
return (
{key: key, value: company.company_id, text: company.company_name}
)})
: null}
value={(companyId > 0) ? companyId: null}
onChange={handleDropdownChange}
/>
{determineErrorMessage('companyId')}
</div>
Now I'd like to change the border color if the element is in an error state such as the user hasn't picked an item yet. To do this with any other HTML element, I can just set the className but it doesn't seem to work with this element.
In the example above, I'm just hardcoding the className={classes.errorState} where errorState: { borderColor: 'red' } but doing so doesn't work.
Any ideas on how to get this working properly?
P.S. As a temporary fix I added a <div> wrapper around it which kind of works except you can clearly see the border of the <div> and the border of the <Dropdown> element.
HI i reworked the semantic example for you
As it's a div and not a true HTML list try it like this
CSS
.dropdownRed {
border: 1px solid red !important;
}
JSX
<Dropdown.Menu className={errClass}>
Link to working codesandbox demo
I'm building my first React modal. The basic structure is now done but I want to have more padding in between the border and the contents. I thought this would be simple but I've tried several things and none work.
return (
<div className={classes.backDrop}>
<Modal
backdrop={'static'}
size='lg'
show={true}
centered={true}
style={classes.modalContainer}
data-testid='addFleetCustomerModal'
>
<div className='modalContainer'>
<ModalHeader>
</ModalHeader>
<Modal.Body>
<Modal.Title>
Add Customer
</Modal.Title>
<Form.Group>
<Form.Label className={classes.highlight}>Company Name*</Form.Label>
<Form.Control id='companyName' data-testid='companyName' type='text' placeholder='For example: ABC Corp.'
/>
</Form.Group>
<Form.Group>
<Form.Label>
<strong>NOTES</strong><br/>
Notes added here can only be viewed and edited by other team members.
</Form.Label>
<textarea className="form-control" id="companyNotes" rows="3"></textarea>
</Form.Group>
</Modal.Body>
<Modal.Footer>
<Row>
<a href='/#'>Cancel</a>
<Button variant='secondary' size='sm'> Next </Button>
</Row>
</Modal.Footer>
</div>
</Modal>
</div>
);
Any ideas on what CSS I should add (and where) to move the content of the modal inward a bit more?
add this to your css:
.modal-header,
.modal-body,
.modal-footer {
padding: 2rem; //change the padding as you want
}
this will change the padding but the with full width lines between sections.
See Working demo 1
you can also add the padding around the whole modal but this this won't make the lines full width:
.modal-content {
padding: 2rem;
}
See Working demo 2
My apologies, everyone. I must have been really tired yesterday afternoon when I posted this. Let me explain the solution:
The code I posted above is inside a functional component that is defined like this:
const AddCustomer = ({ classes }) => {
classes comes from the parent component, which is defined like this:
class UserMgmtPage extends React.Component {
In this parent component, the CSS styleSheet is injected into via react-jss code. I then pass does these same CSS classes into functional child component.
You'll notice this 2nd line, which was always working:
<div className={classes.backDrop}>
My failure was to use the same syntax. Thus the solution is this:
<div className={classes.modalContainer}>
Sorry for the trouble but I do appreciate everyone who tried to help!
I have been trying to build a small project with React for the past few days and all went great until today. For some reason, no CSS is applied to new components! All the CSS that worked before is still up and running but if I'd add something like a div in between an already existing div, the new div will not pick up any CSS!
Example:
<div className="DivStyle"> // Styling applied!
<div className="DivStyle"> </div> // Styling completely ignored!
<div>
It is probably worth mentioning that I am still able to style the components inline.
Also, looking at the sources in Chrome, the styles are uploaded!
Here is my concrete example:
import '../styles/drawers.css';
class BottomFilterDrawer extends React.Component<IBottomFilterDrawerProps, IBottomFilterDrawerState> {
...
public render() {
return(
<Drawer
open={this.state.isOpen}
anchor="bottom"
// tslint:disable-next-line jsx-no-lambda
onClose={() => this.toggleDrawer(false)}>
<div className="BottomDrawerContainer" style={{margin: "10px"}}> // Styling for "BottomDrawerContainer" class not applied!
...
</div>
</Drawer>
);
}
}
The CSS file:
#BottomDrawerContainer {
margin: 10px;
}
I am certain that the import path is correct, Typescript wouldn't even let me run it if it weren't.
You are applying css for class not for id. So your css must be like below.
.BottomDrawerContainer {
margin: 10px;
}
if you want to apply for inner div.
.DivStyle .DivStyle {
//style for inner div
}
do not use again same id, React create error and if show any error first you solve error otherwise browser not show anything
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.
When I open my react app, the component below flashes with width:100%, probably because it inherits it from the material-ui card.
In my react app there are a lot of these components being rendered, each with their own width which are based on the parent component's data. I set the width with an inline style based on the props.
As I understand, the component has the inline style as it is created and there should be no delay to apply it. However I see all the SceneThumb components with 100% width for a a fraction of a second, before they apply the given inline style.
If I change the css of scene-thumb-parent to include some width, say 10% for example, then I'll see them all with 10% for a fraction of a second, before the inline style is applied. That makes me think there is a delay in applying inline css, but it really puzzles me..
Is this to be expected of react? Or of html in general? Is there any way to reduce this inline style application delay? Maybe it's something to do with the dev hot reloading setup I get from create-react-app?
SceneThumb.js (code that is irrelevant to the question has been omitted):
import React, { Component } from 'react';
import './scene-thumb.css';
import Card from 'material-ui/Card';
class SceneThumb extends Component {
render() {
return (
<div
className='scene-thumb-parent'
style={{width:this.props.width, left:this.props.left}}
>
<Card
className={this.props.selected?'scene-thumb-selected':'scene-thumb'}
>
<span>
Hello world!
</span>
</Card>
</div>
);
}
}
export default SceneThumb;
scene-thumb.css:
.scene-thumb-parent {
position:relative;
text-overflow:clip;
white-space:nowrap;
overflow:hidden;
min-width: 12px;
}
.scene-thumb-selected {
border: 2px solid red;
border-radius: 5px;
}
.scene-thumb,.scene-thumb-selected {
padding: 2px;
margin:2px;
position:relative;
}
The width prop is initially null or some other value. A moment later, the prop is updated which triggers another render. This is why you're seeing the flash you're talking about.
You can test this by adding the following to your render() function:
console.log(this.props.width)
You'll probably see it logging at least twice with different values.
There are many ways you can fix this. What makes most sense would depend on the rest of the application, and your personal preference. Regardless, here's one way:
render() {
if(!this.props.width) return null; //if it's null, render nothing.
return (
<div className='scene-thumb-parent' style={{width:this.props.width, left:this.props.left}}>
<Card className={this.props.selected?'scene-thumb-selected':'scene-thumb'}>
<span>Hello world!</span>
</Card>
</div>
);
}