角度材料选择框未正确显示

<div class="angle-material-selector">
    <select>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>

.angle-material-selector {
    display: flex;
    align-items: center;
}

.angle-material-selector select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

document.addEventListener('DOMContentLoaded', function() {
    const selector = document.querySelector('.angle-material-selector select');
    if (selector) {
        selector.addEventListener('change', function() {
            console.log('Selected value:', this.value);
        });
    }
});

import React from 'react';
import ReactDOM from 'react-dom';

function AngleMaterialSelector() {
    return (
        <div className="angle-material-selector">
            <select>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
    );
}

ReactDOM.render(<AngleMaterialSelector />, document.getElementById('root'));