Question

TextField API没有提及任何人如何设置输入元素的伪占位符元素的样式。

基本上，我想更改占位符文本的默认样式，而the normal bag of tricks不起作用，因为我无法访问该元素。

有没有办法可以达到目的？如果是这样，JSS / React / DOM等同于编写::-webkit-input-placeholder的方式是什么？

Answer 1

案例1

将所需的占位符文本放在label组件的TextField属性中，并使用labelClassName的{{1}}属性对其进行自定义。您还可以使用TextField，InputLabelProps或className属性传递classes。

案例2

不要使用style的{{1}}属性，而是将占位符文本放在其label属性上。依靠TextField来覆盖生成的HTML placeholder元素的类。

<强>代码

以下代码涵盖上述两种情况。 CodeSandbox snippet

InputProps

Answer 2

我还没有找到一个正确的答案来解决我如何访问内部输入元素，但是对于如何使用JSS来定位占位符元素，我找到了{{1}的答案in the source元素，其中TextField被组成。

基本上，它使用直接的css名称，只是用引号括起来： '&::-webkit-input-placeholder': { color: 'blue' }

Answer 3

您可以使用以下代码来应用占位符样式。

const styles = (theme: any) => createStyles({
input: {
    '&::placeholder': {
      fontStyle: 'italic',
    },
  },
});

<TextField
  margin="normal"
  variant="outlined"
  placeholder="Filter..."
  InputProps={{
    classes: { input: classes.input}
  }}
/>

Answer 4

您可以在应用程序的顶层设置输入样式，这将使您不必创建应用了自定义输入组件的自定义输入组件（如其他答案所建议）。

import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";

const customTheme = createMuiTheme({
overrides: {
  MuiInput: {
    input: {
      "&::placeholder": {
        color: "gray"
      },
      color: "white", // if you also want to change the color of the input, this is the prop you'd use
    }
  }
});

// Render it like this
<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

Answer 5

您可以使用::placeholder css中的::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pink; } :-moz-placeholder { /* Firefox 18- */ color: pink; }选择器为您的输入添加样式。

$collection = collect([
    ['name' => 'Desk', 'price' => 200],
    ['name' => 'Chair', 'price' => 100],
    ['name' => 'Bookcase', 'price' => 150], ]);

$sorted = $collection->sortBy('price');

$sorted->values()->all();

$data = DB::table("chatbox")
                  ->where('dept_name',Session::get('dept_name'))
                  ->orderBy('created_at', 'desc')
                  ->paginate(20);

$sorted = $data->sortBy('created_at');

$sorted->values()->all();

Answer 6

要在聚焦时仅设置没有标签的占位符的样式 - 执行以下操作：

const useStyles = makeStyles(theme => ({
    label: {
         color: 'rgba(0, 0, 0, 0.26)'
    }
}));

const LoginForm = () => {
    const classes = useStyles();

    return (
         <TextField
              ...
              InputLabelProps={{
                   classes: {
                       root: classes.label,
                   }
              }}
         />
    )
}

Answer 7

在TextField上使用InputLabelProps

<TextField
   InputLabelProps={{
      style: { color: '#fff', some other Styles }, 
   }}
/>

Answer 8

我只使用带有样式的组件：

const StyledTextField = styled(TextField)`
    label {
        font-style: italic;
    }
`;

在TextField

8 个答案: