WordPress中能否在自定义WP-login CSS类中复用Material Design Lite CSS类？

Absolutely! You can absolutely reuse styles from Material Design Lite (MDL) in your custom WP-login CSS, even without modifying the login page's HTML structure. Here are a few practical, actionable methods:

1. Copy MDL Class Styles Directly to Your Target Selectors #

If you only need specific styles from an MDL class (like .mdl-button or .mdl-textfield), simply copy the entire CSS rule set from the MDL file into your custom WP-login selector.

For example, if you want to apply MDL's button styles to WordPress's default primary login button:

/* Your custom WP-login CSS */
.wp-core-ui .button-primary {
  /* Paste all styles from MDL's .mdl-button here */
  min-width: 64px;
  padding: 0 16px;
  border: none;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 36px;
  outline: none;
  cursor: pointer;
  /* Add any extra overrides for WP's default styles here */
  background-color: #2196F3; /* MDL primary color example */
}

This way, you're directly applying MDL's visual properties to the existing WP login elements without touching the HTML.

2. Use CSS Preprocessor @extend (If You're Using Sass/Less) #

If you're using a CSS preprocessor like Sass or Less, you can use the @extend directive to inherit styles from MDL classes without duplicating code.

For example in Sass:

/* Your custom WP-login SCSS */
.wp-core-ui .button-primary {
  @extend .mdl-button;
  @extend .mdl-button--raised;
  /* Add any WP-specific overrides here */
}

When compiled, this will merge your WP selector with the MDL selectors, applying all the MDL styles automatically. Just make sure your preprocessor has access to the MDL stylesheet when compiling.

3. Leverage MDL's CSS Variables (If Available) #

Many modern MDL versions use CSS custom properties (variables) for colors, spacing, and other design tokens. You can reference these variables in your custom styles to align with MDL's design system without copying full rules.

Example:

/* Your custom WP-login CSS */
.wp-core-ui .button-primary {
  background-color: var(--mdl-color-primary);
  color: var(--mdl-color-primary-contrast);
  border-radius: var(--mdl-shape-small);
  /* Add other WP-specific styles here */
}

This keeps your code clean and ensures consistency with MDL's design, even if you update MDL later.

Key Notes to Remember: #

• Load Order: Always load your custom WP-login CSS file after the MDL CSS file. This ensures your styles take precedence over both MDL and WordPress's default login styles (when needed).
• Resolve Conflicts: Use your browser's developer tools to inspect elements and fix any style conflicts. If necessary, use more specific selectors (instead of !important whenever possible) to override conflicting styles.
• Keep MDL Original Intact: Never modify the original MDL CSS file—this makes it easier to update MDL to newer versions later without breaking your customizations.

内容的提问来源于stack exchange，提问作者Michael Benzo