React component prop style

1
votes

I am using from UI Materials the (https://material-ui.com/demos/text-fields/) component and I want to style the helper text.

enter image description here

I've tried 

pstyle = {
  "& div p": {
    textAlign: "right"
  }
}

and then pass it as style={this.pstyle} and it does not work.

Does anyone has a solution? Thanks!

Update: This is the component and it's props: https://material-ui.com/api/text-field/ What am I trying to style is the helperText prop

4
reactjsmaterial-ui
I don't believe you can use& in react style properties that way? I'd be happy to be proved wrong! – OliverRadini
@OliverRadini I've found something similar here at no. 4 codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 – Vlad
I'm struggling to find a good example of that in the article you've linked. There's some uses of something similar in the styled components section, but that's a little different to what you're doing here – OliverRadini
Did my response help in any way? – rdarioduarte
@rdarioduarte Hello and thanks for the welcome message. I am trying to implement the css as we speak. I'll keep you updated – Vlad

4 Answers

0
votes

first of all welcome!

As OliverRadini said, you cannot use & in the way you proposed, and this makes sense, since you are directly targeting a specific element, it is not required to start making complex selectors.

Talking about your task at hand, remember that TextField component in Material UI library is just a wrapper component for a complete form control including a label, input and help text.

Bare in mind that using Material UI components is aligned with Google's Material Design patterns, so the idea is to stick with their guidelines, but if you want to customize, this is what you can do, either use FormHelperTextProps as prop in the TextField or instead of using the TextField wrapper, just break it into its pieces (FormControl, InputLabel, Label, FormHelperText)

The first option is the easiest way to do it for simple customization as the one you want to achieve. Try something like:

Your CSS class

projDescHelperText: {
    textAlign: "right"
}

Your Component

<TextField
    id="project-description"
    label="Project Description"
    helperText="(0/300)"
    FormHelperTextProps={className={classes.projDescHelperText}}
    value={this.state.description}
/>

If you have some of your code you can share, I would be able to better tailor a response to you

0
votes

I think you should set { "p": { textAlign: "right" } } instead of { "& div p": { textAlign: "right" } }

0
votes

You should use:

<div styles={{textAlign: 'right'}}>
 <p> 0/300</>
</div
0
votes

So I've done it like this: 

import { withStyles } from "@material-ui/core";
    const style = {
  smth: {
    "& p": {
        textAlign: "right !important"
      }
  }
}

<TextField
    className={classes.smth}
  />
export default withStyles(style)(CustomTextField);

seems to be working fine for now. Thanks all for the help and the promptitude and @rdarioduarte your solution helped me a lot. Thanks a lot guys!