MSDN Documentation

Styling Components

This tutorial explores various methods for styling components within the MSDN UI framework, ensuring a consistent and visually appealing user experience. We'll cover inline styles, CSS classes, and the use of CSS-in-JS solutions.

1. Using CSS Classes

The most common and recommended approach is to leverage CSS classes. This promotes reusability, maintainability, and separation of concerns.

Define your styles in a separate CSS file (e.g., styles.css) or within a <style> tag in your HTML:

.my-button {
    background-color: #0078d4;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.my-button:hover {
    background-color: #005a9e;
}

Then, apply the class to your component:

2. Inline Styles

Inline styles can be useful for dynamic styling or when a specific style needs to override all others. However, overuse can lead to unmaintainable code.

You can apply styles directly to an element using the style attribute:

<button style="background-color: #00cc99; color: white; padding: 12px 25px; border-radius: 8px;">
    Styled Inline
</button>

3. CSS-in-JS Solutions

For component-based architectures, CSS-in-JS libraries offer powerful features like automatic vendor prefixing, dynamic style generation based on props, and scoped styles.

While MSDN UI doesn't strictly enforce a specific library, concepts like styled-components are widely adopted. Here's a conceptual example:

// Conceptual CSS-in-JS usage
import styled from 'styled-components';

const StyledCard = styled.div`
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    margin-bottom: 20px;

    h4 {
        color: #005a9e;
        margin-top: 0;
        font-size: 1.3em;
    }
`;

// In your component:
// <StyledCard>
//     <h4>Card Title</h4>
//     <p>This is a card styled using CSS-in-JS concepts.</p>
// </StyledCard>

4. Theming and Variables

Utilize CSS custom properties (variables) for easier theming and consistency across your application.

:root {
    --primary-color: #0078d4;
    --text-color: #333;
}

.themed-text {
    color: var(--text-color);
}

.themed-background {
    background-color: var(--primary-color);
    color: white;
}