时间戳

首页 > 解决方案 > Reactjs，语义 ui 反应，菜单>项目问题

css - Reactjs，语义 ui 反应，菜单>项目问题

问题描述

这是我在这里的第一个问题，我是 React 应用程序和语义 ui 反应的初学者，如果我的问题有点笨拙，很抱歉。

因此，我在导入后使用语义 ui 反应创建了一个菜单。现在我可以在给定的选项中为菜单选择任何背景颜色。但我想将其设置为自定义颜色。那么如何在覆盖样式表中定位它呢？我尝试了 .ui.menu 并失败了。这是代码的开始部分：

import React, { Component, createRef } from 'react'
import { Input, Menu, Image, Grid, Sticky } from 'semantic-ui-react'
import styled from 'styled-components'
import Link from 'next/link';
import { relative } from 'path';

export default class Navbar extends Component {
    constructor(props) {
        super(props);
    }
    state = { activeItem: this.props.currentPage }
    contextRef = createRef()
    render() {
        const { activeItem } = this.state
        return (
            <div >
                <Menu size="massive" className="size" pointing stackable>
                    <Image style={{ 'font-size': 50 }} avatar src='http://www.transitionsta.org/wp-content/uploads/2016/12/twitter-black-round-icon.png' className='logo' />
                        <Link href='/home'>
                            <Wrap>
                               <Menu.Item
                                  name='HOME'
                                  active={activeItem === 'home'}
                                  position='right'
                                   />
                             </Wrap>
                            </Link>
                            <Link href="/contact">
                              <Wrap>
                                  <Menu.Item
                                     name='CONTACT US'
                                     active={activeItem === 'contact us'}
                                     position='right'
                                    />
                                </Wrap>
                            </Link>
                            <Link href='/aboutProfile'>
                             <Wrap>
                              <Menu.Item
                                 name='ABOUT US'
                                 active={activeItem === 'about us'}
                                 position='right'
                                 />
                                </Wrap>
                            </Link>
                </Menu>

那么如何定位菜单背景颜色以及它与定位菜单>项目有什么不同呢？多谢你们。

标签： cssreactjssemantic-ui-react

解决方案

您可以使用

  • 一个 className 属性（确保它覆盖当前的 CSS，!important在需要时使用）
  • 内联样式<Menu style={{ backgroundColor: 'red'}}>
  • 样式化的组件

推荐阅读