React.createElement使用疑问：无法为MDBInput及grey-text div设置样式

Hey there! I get it, working with React.createElement can feel a bit clunky when you're new to React, especially when pairing it with UI libraries like MDBootstrap. Let's break down why your styles aren't applying to the MDBInput and the grey-text div, and how to fix it to match the basic form template:

1. Ensure MDBootstrap Styles Are Properly Imported #

First off, MDBReact components rely on their dedicated CSS to render correctly. If you haven't already, add the MDB stylesheet to your root file (like index.js):

import 'mdb-react-ui-kit/dist/css/mdb.min.css';

Without this import, none of the library's specialized classes or component styles will kick in—this is likely the main reason your elements look unstyled.

2. Correct MDBInput Prop Usage #

Looking at your code, the way you're passing content to MDBInput is off. The 'ddd' you're passing as a child isn't how you set the input's value. Instead, use the value prop directly. Also, to apply the grey text style to the input label, use the labelClass prop on MDBInput:

React.createElement('MDBInput', {
  icon: 'envelope',
  type: 'email',
  error: 'wrong',
  success: 'right',
  label: 'account',
  value: 'ddd', // Set input value via prop, not child
  labelClass: 'grey-text' // Apply grey text to the label
})

If you want the entire input wrapper to inherit the grey text style, wrapping MDBInput in your existing grey-text div will work, just make sure the div's styles cascade properly to the input elements.

3. Verify Component Imports #

Double-check that you're importing all the MDB components you're using. At the top of your component file, you should have:

import { MDBContainer, MDBRow, MDBCol, MDBInput } from 'mdb-react-ui-kit';

Using string names like 'MDBContainer' in React.createElement only works if these components are in scope—if they're not imported, React will render them as generic HTML elements instead of styled MDB components.

Modified Working Code Example #

Here's your updated code with all fixes applied:

render() {
  return React.createElement('MDBContainer', null,
    React.createElement('MDBRow', null,
      React.createElement('MDBCol', { md: '6' },
        React.createElement('form', null,
          React.createElement('p', { className: 'h5 text-center mb-4' }, 'Sign in'),
          React.createElement('div', { className: 'grey-text' },
            React.createElement('MDBInput', {
              icon: 'envelope',
              type: 'email',
              error: 'wrong',
              success: 'right',
              label: 'account',
              value: 'ddd'
            })
          )
        )
      )
    )
  )
}

This should render the form with the correct grey text for the label and properly styled input matching the MDBootstrap template.

Quick Troubleshooting Tip #

If styles still aren't showing up, inspect the elements in your browser dev tools. Check if the MDB classes are applied to the elements, and if the MDB CSS is loaded in the "Sources" tab. This will help you spot missing styles or incorrect component rendering.

内容的提问来源于stack exchange，提问作者Le Minh