[英]jss syles for the dropdown for react
so I googled and found this link Styling the placeholder in a TextField所以我用谷歌搜索并找到了这个链接Styling the placeholder in a TextField
I tried with.important too but its not working.我也试过 with.important 但它不起作用。
https://codesandbox.io/s/react-codesandboxer-example-ntz22 https://codesandbox.io/s/react-codesandboxer-example-ntz22
const styles = theme => ({
input: {
// padding: 0,
"&::placeholder": {
// fontSize: '14 !important',
color: "blue !important"
}
}
});
class SingleSelect extends Component<*, State> {
state = {
isClearable: true,
isDisabled: false,
isLoading: false,
isRtl: false,
isSearchable: true
};
toggleClearable = () =>
this.setState(state => ({ isClearable: !state.isClearable }));
toggleDisabled = () =>
this.setState(state => ({ isDisabled: !state.isDisabled }));
toggleLoading = () =>
this.setState(state => ({ isLoading: !state.isLoading }));
toggleRtl = () => this.setState(state => ({ isRtl: !state.isRtl }));
toggleSearchable = () =>
this.setState(state => ({ isSearchable: !state.isSearchable }));
render() {
const {
isClearable,
isSearchable,
isDisabled,
isLoading,
isRtl
} = this.state;
return (
<Fragment>
<Select
className="basic-single"
classNamePrefix="select"
// defaultValue={colourOptions[0]}
isDisabled={isDisabled}
isLoading={isLoading}
isClearable={isClearable}
isRtl={isRtl}
isSearchable={isSearchable}
name="color"
options={colourOptions}
placeholder={"2 testing here."}
/>
</Fragment>
The link you've found is for the Material-UI <TextField/>
but you're using React Select .您找到的链接是针对Material-UI <TextField/>
但您使用的是React Select 。
React select has a styles
property which accepts a paceholder
method to return the placeholder styles like this: React select 有一个styles
属性,它接受一个paceholder
方法来返回占位符样式,如下所示:
<Fragment>
<Select
className="basic-single"
classNamePrefix="select"
// defaultValue={colourOptions[0]}
isDisabled={isDisabled}
isLoading={isLoading}
isClearable={isClearable}
isRtl={isRtl}
isSearchable={isSearchable}
name="color"
options={colourOptions}
placeholder={"2 testing here."}
styles={{
placeholder: () => ({
color: 'blue'
})
}}
/>
</Fragment>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.