Question

使用import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; import { FieldValidationComponent } from './child-component/field-validation.component'; import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators' import { FocusDirective } from './directive/focus.directive'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule, RxReactiveFormsModule], declarations: [ AppComponent, HelloComponent, FieldValidationComponent, FocusDirective], bootstrap: [ AppComponent ] }) export class AppModule { }在Material-ui包装器组件中定位和样式化特定子元素的正确/建议方法是什么？我们使用类选择器吗？

例如我使用makeStyles()

来定位TextField组件的输入元素

& .MuiInput-input

我知道Material-UI中有很多样式化组件的方法，这就是为什么我有点困惑的原因。因此，我只想知道针对子元素的标准方法。我在文档中看到了使用import { makeStyles} from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ foo: { '& .MuiInput-input': { backgroundColor: 'red' } } }); export default function () { const classes = usePageStyles(); return (<div> <TextField id="search" label="Search" placeholder="Search" className={classes.x} /> </div>); };的示例-这是否意味着没有Material-UI特定的方式？我们只使用基本的CSS选择器吗？

Answer 1

我建议将InputProps和一个对象传递给TextField。

类似的东西：

const InputProps = {
  className: classes.input,
  color: 'primary'
}

然后将其传递到TextField：

<TextField
  InputProps={InputProps}
>

在Material-ui包装器组件中定位和设置特定子元素样式的正确方法？

1 个答案: