I am trying to pass the placeholderTextColor attribute through the styled.TextInput.attrs function. The reason why I'm doing this is so I can access the theme props.
This is what I have:
const TextInput = styled.TextInput.attrs(props => ({
placeholderTextColor: "red",
type: "password"
}))`
color: ${({ theme }) => theme.colors.text};
`
But I am getting the following error:
_native.default.TextInput.attrs is not a function. (In '_native.default.TextInput.attrs(function (props) {
return {
placeholderTextColor: "red",
type: "password"
};
})', '_native.default.TextInput.attrs' is undefined)
I guess #emotion/native does not support the attrs function yet, so I moved over to styled-components.
Related
Let's say I have a very simple props interface that specifics a boolean property. Now, in my useStyles, I want to change how that style is rendered based on both the conditional property AND a breakpoint. Here's a very simple example:
interface Props {
isError: boolean;
}
const useStyles = makeStyles<Theme, Props>(theme => ({
box: ({ isError}) => ({
backgroundColor: isError? 'red' : 'green',
[theme.breakpoints.up('md')]: {
backgroundColor: isError ? 'maroon' : 'teal',
}
}),
}));
When I'm under the md breakpoint, this works as expected; but as soon as I go over the md breakpoint, the color doesn't change. How come?
Here's a demo on StackBlitz that demonstrates the problem.
In working up the example for this question, I figured out the problem. The property value for creating styles based on a breakpoint, also needs to be a function:
const useStyles = makeStyles<Theme, Props>(theme => ({
box: (outerProps) => ({
backgroundColor: outerProps.isError ? 'red' : 'green',
[theme.breakpoints.up('md')]: (innerProps) => ({
backgroundColor: innerProps.isError ? 'maroon' : 'aqua',
}),
})
}));
Here's an updated StackBlitz showing the working example.
I have have TestWrapper component that clones element and is supposed to make the background blue. Test is also doing the same, but instead sets color. I was expecting the rendered element to have blue background and red text, but it is only red. Here is the example:
const Test: React.FC<{ element: React.ReactElement }> = ({ element }) => {
return React.cloneElement(element, {
const isSelected = useIsSelected();
style: { ...element.props.style, color: isSelected ? 'red' : 'black' }
});
};
const TestWrapper: React.FC<{ element: React.ReactElement }> = ({
element
}) => {
// BackgroundColor is blue
const { backgroundColor } = useTheme();
return React.cloneElement(element, {
style: { ...element.props.style, background: backgroundColor }
});
};
export function App() {
return <TestWrapper element={<Test element={<h1>Heading</h1>} />} />;
}
How can I achieve this? I could do this differently, but I have to be able to access hook methods from Test and TestWrapper.
Simple codesandbox example: https://codesandbox.io/s/serene-bassi-ve1ym?file=/src/App.tsx
In TestWrapper you are cloning the Test component and applying your style props to it, which are not being passed down to the element that it's cloning itself. Just returning a cloned element doesn't create a referential equality where doing something to the component will affect the element it is cloning. You would need to give a style prop to Test and pass it down to the element being cloned:
const Test: React.FC<{
style?: React.CSSProperties;
element: React.ReactElement;
}> = ({ element, style }) => {
return React.cloneElement(element, {
style: { ...element.props.style, ...style, color: "red" }
});
};
I made a fork here. Hopefully this helps!
I want to get rid of the Card on the background react-admin's List (v3.4.2). I get the desired effect if I define a string on the component property:
<List component={"some string"}/>
But this spams the console with an error:
And I don't want to have that error. On top of that, I think I shouldn't be changing the component property (I can't find it on the official docs).
The code should be the following: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/list/List.js
How should I do this? Is it possible to pass a style? Is there any component that works out of the box? Or should I just go custom?
You can hide the background using styling:
import { makeStyles } from '#material-ui/core/styles'
const useListStyles = makeStyles(theme => ({
content: {
boxShadow: 'none',
backgroundColor: 'inherit',
},
main: {
// backgroundColor: 'red',
},
root: {
// backgroundColor: 'red',
},
}))
const MyList = (props) => {
const classes = useListStyles()
return (
<List classes={classes} {...props} >
...
</List>
)
}
I have a form with a very awkward background color. Would like to change the color of the helper text of the Outlined TextField when it is in an error state but can't seem to override it. It persists the red.
See CodeSandBox .
For some reason, the error text color is generated under the following className: .MuiFormHelperText-root.Mui-error
So overriding error rule alone is not enough.
This will do the trick:
const helperTextStyles = makeStyles(theme => ({
root: {
margin: 4,
color:'black',
},
error: {
"&.MuiFormHelperText-root.Mui-error" :{
color: theme.palette.common.white,
},
},
}));
Code Sandbox
The problem is caused by CSS specificity (the base style has more specific classname, i.e. MuiFormHelperText-root.Mui-error than the overriding style class). It's recommended to use &$ syntax under this circumstance:
const helperTextStyles = makeStyles(theme => ({
root: {
margin: 4,
'&$error': {
color: 'white'
}
},
error: {} //<--this is required to make it work
}));
You can also refer to this section for an example and a bit more explanation.
It would be better to customize your Mui Theme as follows:
const Theme = {
components: {
MuiFormHelperText: {
styleOverrides: {
root: {
color: "red"
}
}
}
}
};
See https://mui.com/material-ui/customization/theming/ for more information.
i found one solution to change the color of text field.
<TextField
error
id="filled-error-helper-text"
label="Error"
defaultValue="Hello World"
helperText="Incorrect entry."
variant="filled"
/>
here you can see error which is Boolean, so you might be having validation like YUP, if you do then you pass it like this.
<TextField
error={!valid}
id="filled-error-helper-text"
label="Error"
defaultValue="Hello World"
helperText="Incorrect entry."
variant="filled" />
here i am changing color base on valid keyword.
I have a button that when clicked, all the content is transparent.
Is it possible to manually set the text color ? Not background color !
I want black color on my font not transparent.
My Code:
import React from 'react';
import DatePicker from "react-datepicker";
import Select from 'react-select';
import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class Test extends React.Component {
state = {
startDate: new Date(),
selectedOption: null,
}
constructor() {
super();
this.state = {
};
}
handleChange = date => {
this.setState({
startDate: date
});
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
return (
<div className="grid-container">
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
dateFormat="yyyy-MM-dd"
/>
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
);
}
}
export default Test;
I tried to manually adjust the colors through this link But without success !
I want the data to be in black letters on a white background when I click the button.
react-select is built in a way you should use CSS-in-JS and not css like describe here: https://react-select.com/styles.
Then you will be able to use some styling props like:
const customStyles = {
option: provided => ({
...provided,
color: 'black'
}),
control: provided => ({
...provided,
color: 'black'
}),
singleValue: provided => ({
...provided,
color: 'black'
})
}
And so on.
react-select v5.2.2 gives the following style keys which we can use to style different parts of UI using css
clearIndicator
container
control
dropdownIndicator
group
groupHeading
indicatorsContainer
indicatorSeparator
input
loadingIndicator
loadingMessage
menu
menuList
menuPortal
multiValue
multiValueLabel
multiValueRemove
noOptionsMessage
option
placeholder
singleValue
valueContainer
Now lets say you want to change the font color of selected option (see the img below)
now what you have to do is you need to find the right **style key** from above and
write a custom css function that's all.
you can use dev tools to inspect elements and easily find the style keys!
const customStyles = {
singleValue:(provided:any) => ({
...provided,
height:'100%',
color:'#08699B',
paddingTop:'3px',
}),
}
<ReactSelect
styles={customStyles}
/>
It took me some time to figure this out, hope it helps you and save your time to understand this.
You can find the class you want to target this way: in the browser element inspector find the element and find its class. You can that modify its class by adding:
.putElementClassNameHere {
color: black !important;
}
You might need !important for the style to be applied.