I need to change border color when focusing on Phone Component from react-phone-input-2 .
I used Styled-Component not material UI
<PhoneInput
country={"us"}
className="marginBottom"
value={phone}
onChange={(phone) => setPhone(phone)}
inputStyle={{
border: "2px solid #E6E6E6",
height: "42px",
width: "384px",
}}
/>
Related
I am using MaterialUI_v5 and have added a TextField component to a Paper component.
I have styled the Paper component background to green.
I have styled the Textfield component to white.
There is unwanted whitespace in the corners of the Textfield component, which I want to be green (image below).
The Textfield component has the following props:
<TextField className={styles.input} label="First Name" variant="outlined" size="small" />
with styling being:
.input{
background-color: white;
width: 400px;
}
The input container has a border radius applied. Try updating the container styles rather than the input by changing the class from .input to .MuiOutlinedInput-root
.MuiOutlinedInput-root {
background-color: white;
width: 400px;
}
I'm using Material UI Tabs in React to implement curved tabs (imagine like ones shown in Google Chrome). The structure must be such that the parent can give a bottom border which should stretch across the entire row making this bottom-border appear on tabs as well as on some other content on right. The selected (or active) tab, however, must remove the bottom border applied on it by its parent.
Expected Result:
Current Result:
The border from parent gets applied over the selected tab too, which is not what I want.
Here's the CodeSandbox link for my code.
Approach Taken:
I tried creating an ::after pseudo-element positioned absolute for selected tab with higher z-index. This pseudo-element creates a white-colored horizontal line and patches it over the bottom border applied by parent to overlap parent's border. However, I could not make it work. There were a couple of other CSS changes I applied; none seemed to move the parent's border. Any help to correct the existing approach I'm taking or suggesting a new approach to get the desired result is appreciated.
(Please note that I want to keep using Material UI Tabs as the base.)
On a side note, could anyone help why there's also some lag when selecting a tab?
Here is a way you can get your desired effect. Remove the parent bottom border, add a new css selector so you can give tabs that arent .MuiSelected a bottom border, then give the someother content div a bottom border so the grey line continues for the full length of the page (the grey is a slightly different shade cause of mui, but you could specifically set it to the right color):
https://codesandbox.io/s/curvy-tabs-using-material-ui-forked-lx57sw?file=/src/App.js
subtabs
import styled from "#emotion/styled";
import MuiTabs from "#material-ui/core/Tabs";
export const StyledSubTabs = styled(MuiTabs)`
.MuiButtonBase-root.MuiTab-root {
background: white;
border-radius: 8px 8px 0 0;
:hover {
background: pink;
}
}
.MuiButtonBase-root.MuiTab-root.Mui-selected {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
border-bottom: none; /* not working */
z-index: 10;
:hover {
background-color: pink;
}
}
//
//added this
//
.MuiButtonBase-root.MuiTab-root {
border-bottom: 3px solid gray;
z-index: 10;
:hover {
background-color: pink;
}
}
.MuiTabs-indicator {
display: none;
}
`;
app.js
import React, { useState } from "react";
import Tab from "#material-ui/core/Tab";
import { StyledSubTabs } from "./SubTabs.styles";
const App = () => {
const [index, setIndex] = useState(0);
const handleChange = (event, newIndex) => {
console.log("SubTab - index", newIndex, event);
setIndex(newIndex);
};
const parentStyles = {
// remove this ----> borderBottom: "3px solid gray",
display: "flex",
justifyContent: "space-between",
alignItems: "center"
};
return (
<div style={parentStyles}>
<StyledSubTabs value={index} onChange={handleChange}>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</StyledSubTabs>
<div
//added this
style={{
borderBottom: "3px solid gray",
height: 45,
flexGrow: 1
}}
>
Some Other Content
</div>
</div>
);
};
export default App;
I am creating a React component using an existing component library that uses styled component. I time to time need to override the style from the parent library and use my own. Here is a TextInput component from the library that has style,
border: 2px solid black;
while using this component I don't want to have the border around the input box. Instead, I just want one underline.
I did it two ways,
Using style props,
<TextInput
name="test-input"
value={testInput}
onChange={onInputChange}
style={{borderTop: 'none',borderRight: 'none',
borderLeft:'none', borderBottom: '2px solid black'}}
/>
By this I get a black border-bottom but it requires me to repeat for all other three. Is there a better way so that I can write one line and that solves my issue ?
I created a styled component based on the existing component,
const TextInputStyled = styled(TextInput)`
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid black`;
And here my component with the above style.
<TextInputStyled
name="test-input"
value={testInput}
onChange={onInputChange}
/>
In this case I get the border-bottom with 2px black but the other border also exist and this is also a repetition.
Is there a better to do this ? I often need to twitch the style of the parent component.
Any help is very much appreciated.
why don't you try this code:
<TextInput
name="test-input"
value={testInput}
onChange={onInputChange}
style={{border:'unset', borderBottom: '2px solid black'}}
/>
Update:
If you insist on using styled component, ThemeProvider is the solution:
const TextInput=styled.input `
border: 2px solid black;
border-bottom: ${props => props.theme.borderBottom};
border-top:${props => props.theme.borderTop};
border-left:${props => props.theme.borderLeft};
border-right:${props => props.theme.borderRight};
`;
\\Define what props.theme will look like
const theme= {
borderTop: 'none;',
borderRight: 'none;',
borderLeft: 'none;',
borderBottom: '1px solid black;'
}
return(<>
\\normal TextInput with border
<TextInput
name="test-input"
/>
\\customized TextInput without border except underline
<ThemeProvider theme={theme}>
<TextInput
name="test-input"
/>
</ThemeProvider>
</>
)
If you don't know about ThemeProvider read this article:
https://styled-components.com/docs/advanced
I am conditionally styling my <input/> (standard HTML) component. I am passing inline JSX style as a style prop:
render() {
return (
<>
<input
type="text"
style={{
width: "100%",
paddingLeft: "8px",
paddingTop: "6px",
paddingBottom: "6px",
border: this.state.error
? "2px solid red"
: this.state.value
? "2px solid #2684ff"
: "2px solid hsl(0, 0%, 80%)",
outline: "0px",
"&:hover": {
border: "2px solid green"
}
}}
placeholder={this.props.placeholder}
onChange={this.handleInput}
onFocus={this.checkErrors}
value={this.state.value}
onBlur={this.sendData}
/>
{this.state.error ? (
<div className="errorMsg"> {this.props.errorMsg} </div>
) : null}
</>
);
}
My conditional styles work, and <input/> border colour changes based on this.state.error and this.state.value, however I can't get '&:hover' style to work. I have checked my .css and there is nothing overriding the style passed as props.
I have tried another approach, where I conditionally set className for my <input/> and define style in external .css file. It works and I can change border colour with:
input[type="text"]:hover {
border: 2px solid pink;
}
However, I would like to make this work in inline JSX. Why does my style for '&:hover': { ... } not work?
The "&" operator mean the current selector in preprocessing language like sass:
input {
&:hover {
background: red;
}
}
Will compile to:
input:hover {
background: red;
}
But you will have to use sass or styled component to use that sync tax.
Pseudo css selectors don't work in inline style.btw I would not recommend any of the js solution in the comments above .you need a more a robust css solution to handle all kind of pseudo selectors.
Your options are:
Use css in js solution like styled-components.https://styled-components.com/
Use regular css or scss and condionaly switch classNames.You
can utilize classnames library for easier experience.https://www.npmjs.com/package/classnames
Render style tag above your input and put your input styles there.quite bad practice and ugly.
I'm currently styling active nav links using Gatsby Link components, Styled-Components Library and the activeStyle object.
Here the Gatsby docs I'm referencing.
The issue I have is css properties such as background: "red" or border: "2px solid green" work, but when I use border-bottom: 2px solid green or background-color: "red" I get an error.
SyntaxError: Unexpected token, expected "," (78:8)
76
77 const activeStyles = {
78 border-bottom: "2px solid orange",
^
79 };
80
I'm using Gatsby 2.7.1 and Styled-components 4.2.0. Up to this point, I have not had any issues with Gatsby or Styled-components. I have tried placing the object in the Link component directly too but the same issue comes up.
<Link to="/" activeStyle={{ border-bottom: "2px solid orange"}}>
Home
</Link>
I currently doing this
<StyledNavLink to="/" activeStyle={activeStyles}>
Home
</StyledNavLink>
// Styled Component
const StyledNavLink = styled(props => <Link {...props} />)`
font-size: 18px;
width: 100%;
color: white;
text-decoration: none;
text-transform: uppercase;
display: flex;
align-items: center;
padding: 0 24px;
`;
// Style Object passed to Gatsby Link Component
const activeStyles = {
border-bottom: "2px solid orange", // Does not work
border: "2px solid orange" // This does work
};
I'm expecting to use all CSS properties but only able to use single word CSS properties.
I don't think this is a styled-component problem.
What am I missing?
From the docs,
The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.
For example, if style attribute is border-bottom then in react is should be borderBottom and if style attribute is border-top-left-radius then in react it should be borderTopLeftRadius and so on.
You should use this,
const activeStyles = {
borderBottom: "2px solid orange", // Now it will work
border: "2px solid orange" // This does work
};
The activeStyle property seems similar to style property in react.
So you can use syntax mentioned below to solve this
activeStyle={{ color: "red" ; "background":"blue" }}
I haven't tried this in gatsby. But still I believe it should work as it works fine in react.