模态中选择标记上的CSS无法使用zurb基础

Question

我使用foundation来设置反应组件的样式。我有一个表单，其中包含从下拉列表中选择的用户角色。我在模态中呈现用户表单，我没有使用表单标签。

当我打开表单时，select标签丢失了css，问题很简单但无法在任何地方找到。

我正在</body>标签上方渲染模态。输入文字字段格式正确，请查看图片。

<div id="user_creation_form" class="reveal-modal open" style="top: 304px; opacity: 1; visibility: visible; display: block;">
  <div data-react-class="UserForm" class="edit-modal-1">
    <div data-reactroot="" class="user-form">
      <div>
        <h3 class="subheader"></h3>
        <div class="user-form">
          <h4>User Information</h4>
          <div>
            <div class="row">
              <div class="field dropdown">
                <label>User Role</label>
                <select>
                  <option value="admin">Admin</option>
                  <option value="user">User</option>
                </select>
              </div>
            </div>
          </div>
          <div class="form-section-divider"></div>
          <div>
            <h4>Authentication Method</h4>
            <div class="auth-container">
              <ul class="auth-methods">
                <li class="auth-methods--selector ">Email</li>
              </ul>
            </div>
          </div>
          <div>
            <div class="field">
              <label>Full Name</label>
              <span class="optionalLabel">(Optional)</span>
               <input type="text" value="dsjdfksdjaflkdsjlafjdlskaklfds">
            </div>
            <div class="field">
              <label>Email</label>
              <span class="optionalLabel">(Optional)</span>
              <input type="text">
            </div>
          </div>
          <div class="action-buttons">
            <div class="button radius submit-button">
              Update User
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="close-reveal-modal">×</a>
</div>