According to the information provided, the <ListItemText /> component has a property called primaryTypographyProps. This property can be utilized to achieve what you are looking for in your query:

const text = {
    color: "red"
};

<ListItem button>
    <ListItemText primaryTypographyProps={{ style: text }} primary="MyText" />
</ListItem>

I trust this explanation is beneficial!

this is a great solution that allows you to implement without having to disable typography styles.

<ListItemText 
   classes={{ primary: this.props.classes.whiteColor }}
   primary="MyTitle"
/>

            <ListItem>
                    <Avatar style={{ backgroundColor: "#ff6f00" }}>
                      <LabIcon />
                    </Avatar>
                    <ListItemText 
                     primary={<Typography variant="h6" style={{ color: '#ff6f00' }}>Lab</Typography>}
                     secondary="Experiments" />
                  </ListItem>

https://i.stack.imgur.com/5ajoO.png

New Features in MUI Version 5

You now have the ability to utilize system properties within the Typography component to easily add styling props for the primary and secondary elements inside the ListItemText:

<ListItemText
  primary="Photos"
  secondary="Jan 9, 2014"
  primaryTypographyProps={{
    fontSize: 22,
    color: 'primary.main',
  }}
  secondaryTypographyProps={{
    fontSize: 15,
    color: 'green',
  }}
/>

If you wish to reuse the ListItemText component in multiple instances, you can also use styled:

import MuiListItemText from '@mui/material/ListItemText';
import { styled } from '@mui/material/styles';

const ListItemText = styled(MuiListItemText)({
  '& .MuiListItemText-primary': {
    color: 'orange',
  },
  '& .MuiListItemText-secondary': {
    color: 'gray',
  },
});

Check out the Live Demo!

https://codesandbox.io/s/43975839-material-ui-next-styling-text-inside-listitemtext-hw6bz?file=/demo.tsx

Discover a more efficient approach to accomplishing this task:

const customStyles = {
  selected: {
    color: 'green',
    background: 'red',
  },
}

const NavigationItems = props => (
  <ListItemText
    classes={{ text: props.classes.selected }}
    primary="Scheduled Calls"
  />
)

export default withStyles(customStyles)(NavigationItems)

For further details on how to implement this technique, visit:

Method 1

const textColor = {
    color: "red"
};

<ListItemText primaryTypographyProps={{ style: textColor }} primary="BlodyLogic" />

const secondaryColor = {
   color: 'green'
}

<ListItemText secondaryTypographyProps={{ style: secondaryColor }} 
     secondary="If you say that you" />

Method 2

<ListItemText
          primary={
            <Typography variant="caption" display="block" gutterBottom>
              caption text
            </Typography>
          }
 />

Custom design:

const useStyles = makeStyles({
      text: {
        color: 'red',
        fontSize: 49
      },
    });
        
/.....// all make classes

<ListItemText
              primary={
                <Typography className={classes.text}>
                  caption text
                </Typography>
              }
     />

Official Documentation

If you are currently utilizing material-ui 3.x, here is the method to implement it:

import { withStyles } from '@material-ui/core/styles';

const styles = {
  listItemText: {
    color: 'white',
  },
}

class YourComponent extends Component {
...
render() {
    const { classes } = this.props; // This functionality is automatically provided by withStyles HOC.
    return (
          <ListItem button>
            <ListItemIcon>
              <DashboardIcon />
            </ListItemIcon>
            <ListItemText classes={{ primary: classes.listItemText }} primary="My Bookings" />
          </ListItem>
    );
...

}
export default withStyles(styles)(YourComponent);

You can define all your text-related styles on the primary property. Unfortunately, this information is buried deep within the documentation. https://material-ui.com/api/list-item/

Version 1 of Material Design

In response to @SundaramRavi, I would like to address the following points:

• The use of the style element in a less optimal way for Material Design version 1.0 (please refer to the important differences between v0.16+ and v1.0).
• How files can be organized for better separation of concerns.

Whatever.styles.js

const styles = theme => ({
  white: {
    color: theme.palette.common.white
  }
});

exports.styles = styles;

Whatever.js

const React = require('react');
const PropTypes = require('prop-types');
const {styles} = require('./Whatever.styles');

class Whatever extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {classes} = this.props;
    return (
      <div>
        <ListItemText
          disableTypography
          primary={
            <Typography type="body2" style={{body2: classes.white}}>
              MyTitle
            </Typography>
          }
        />
      </div>
    );
  }
}

Whatever.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired
};

exports.Whatever = withStyles(styles, {withTheme: true})(Whatever);

To style text easily, you can utilize the & span method.

const useStyles = makeStyles(theme => ({
    listItem: {
        "& span": {
            color: "red"
        }
    }
}));
..
..
<ListItem button>
    <ListItemIcon>
        <SendIcon />
    </ListItemIcon>
    <ListItemText className={classes.listItem} primary="Sent mail"/>
</ListItem>

If you are utilizing the "@material-ui/core": "^4.11.4" (4.X.X or a newer version), then following these steps is straightforward:

#1st step: First, define your styles as shown below:

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    // Other Styling if you wish to use it
    root: {
      width: '100%',
      maxWidth: '36ch',
      backgroundColor: theme.palette.background.paper
    },
    // Other Styling if you wish to use it
    inline: {
      display: 'inline'
    },
    // Desired Styling
    textColor: {
        color: 'red'
    }
  }),
);

#2nd step: Next, create a constant for utilizing the specific styles like so:

const AlignItemsList = (props: any) => {
    const classes = useStyles(); // Like this
    ......
}

#3rd step: Then, implement the defined styling in your ListItemText component:

const AlignItemsList = (props: any) => {
    const classes = useStyles();
    ......
    <ListItemText
         primary="Your Text Goes Here"
         classes={{ primary: classes.textColor }} // Like this
         ...
   />
};

#4th and final step: Finally, export your component normally without any additional elements, as follows:

export default AlignItemsList;

Material-UI Version 5

To achieve consistent styling across all components, I suggest using global styles. One way to do this is by overriding default styles using the createTheme function.

Check out this simple example:

export default createTheme({
    components: {
        MuiListItemText: {
            styleOverrides: {
                root: {
                    marginTop: 0,
                    marginBottom: 0,
                },
                primary: {
                    fontSize: '1rem',
                },
                secondary: {
                    fontSize: '0.8rem',
                },
            },
        },
    },
});

For more information, visit the official documentation page