AppBar Title MUI에서 다른 색상을 적용하는 방법

AppBar Title MUI에서 다른 색상을 적용하는 방법

커스텀 컬러를 사용하려고 합니다.AppBarheader를 클릭합니다.그AppBar의 제목은 'My AppBar'입니다.저는 화이트를 주요 테마 색상으로 사용하고 있습니다.바에는 잘 작동하지만 '제목'은AppBar또한 동일한 '흰색'을 사용하고 있습니다.

코드는 다음과 같습니다.

import React from 'react';
import * as Colors from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
import TextField from 'material-ui/TextField';

   const muiTheme = getMuiTheme({
  palette: {
    textColor: Colors.darkBlack,
    primary1Color: Colors.white,
    primary2Color: Colors.indigo700,
    accent1Color: Colors.redA200,
    pickerHeaderColor: Colors.darkBlack,
  },
  appBar: {
    height: 60,
  },
});

class Main extends React.Component {
  render() {
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy
    // using React's context feature.
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <AppBar title="My AppBar">
       <div>
   < TextField hintText = "username" / >
    < TextField hintText = "password" / >

    </div>
    
        </AppBar>
      </MuiThemeProvider>
    );
  }
}

export default Main;

단, 팔레트 스타일은 다음 스타일을 덮어씁니다.AppBar'마지막' 색상으로 제목이 표시되지 않습니다.포함시킬까요, 아니면 잘못 넣었을까요?

출력은 다음과 같습니다.

머티리얼 UI 디자인에서 앱바의 배경을 변경하는 경우는, 다음의 코드를 사용해 주세요.

<AppBar style={{ background: '#2E3B55' }}>

또는 className을 적용하려면 다음 단계를 수행합니다.

우선 create const var를 만듭니다.

const style = {

    background : '#2E3B55';
};

<AppBar className={style}>

MUI v5 업데이트

1. 사용sx받침대

<AppBar sx={{ bgcolor: "green" }}>

2. 세트primary.main색칠을 하다Palette

그Appbar배경색은 기본적으로 테마에서 제공된 기본 색상을 사용합니다.

const theme = createTheme({
  palette: {
    primary: {
      main: "#00ff00"
    }
  }
});

3. 세트AppBar기본 스타일styleOverrides

만지고 싶지 않으면 이걸 쓰세요.primary.main다른 컴포넌트에 영향을 줄 수 있습니다.

const theme = createTheme({
  components: {
    MuiAppBar: {
      styleOverrides: {
        colorPrimary: {
          backgroundColor: "red"
        }
      }
    }
  }
});

material-ui 소스에서 본 바로는 appBar 타이틀 컬러가 팔레트별로 설정되어 있습니다.교대하는텍스트 컬러스타일 정의에 다음과 같이 추가할 경우:

const muiTheme = getMuiTheme({
  palette: {
    textColor: Colors.darkBlack,
    primary1Color: Colors.white,
    primary2Color: Colors.indigo700,
    accent1Color: Colors.redA200,
    pickerHeaderColor: Colors.darkBlack,
    alternateTextColor: Colors.redA200
  },
  appBar: {
    height: 60,
  },
});

각 컴포넌트 내에서 수동으로 제목을 스타일링할 필요 없이 제목을 볼 수 있습니다.

MuiTheme에 대한 스타일링 파라미터는 여기에 설명되어 있습니다.

make Styles()를 사용하여 스타일을 만듭니다.

const useStyles = makeStyles(theme => ({
  root: {
    boxShadow: "none",
    backgroundColor: "#cccccc" 
  } 
}));

컴포넌트에서 위의 스타일을 사용합니다.

const classes = useStyles();

<AppBar className={classes.root} />

• 먼저 teme.js를 만들어주세요.

- theme.js
import { red } from '@material-ui/core/colors';
import { createMuiTheme } from '@material-ui/core/styles';

export default createMuiTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
});

• 다음 행을 index.js에 추가합니다.

import { ThemeProvider } from '@material-ui/core/styles'
import theme from './theme'

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />    
  </ThemeProvider>,
  document.getElementById('root')
);

<AppBar position='static' color='secondary' elevation={2}>
  ...
</AppBar>

*** 중요 ***

secondary: {
  main: '#19857b',
},

color='secondary'

드디어 AppBar에서 스타일링 타이틀의 titleStyle에 대해 알게 되었습니다.

const titleStyles = {
  title: {
    cursor: 'pointer'

  },
  color:{
    color: Colors.redA200
  }
};
 <AppBar title={<span style={titleStyles.title}>Title</span>} titleStyle={titleStyles.color}> .............
</AppBar>

기본적으로 팔레트의 대비를 사용합니다.텍스트 프로펠러(v3):

const theme = createMuiTheme({
  palette: {
    primary: {
      contrastText: 'rgba(0,0,0,0.8)'
    }
  },
});

먼저 파일에 const를 추가합니다.그런 다음 다음과 같이 필요한 라인에 적용합니다.

const styles = { button: { margin: 15,}, appBarBackground:{ background : '#2E3B55' }};

그런 다음 아래 그림과 같이 라인에 추가합니다.

 style={styles.button}
 style={styles.appBarBackground}

코드를 인라인으로 추가합니다.

<AppBar title="My AppBar" style={{ backgroundColor: '#2196F3' }} >

또는 css가

import './home.css';

이것을 당신의 코드에 맞추세요.

.title {
text-align: left;
background-color: black !important;}

도움이 되길 바라.

@Near Huscarl에 대한 답변 작업 중.앱바 색상에 관계없이 스타일을 적용할 경우: 예:<Appbar color="secondary"또는<Appbar color="primary"루트 속성을 사용할 수도 있습니다.

const theme = createTheme({
  components: {
    MuiAppBar: {
      root: {
        colorPrimary: {
          backgroundColor: "red"
        }
      }
    }
  }
});

차이점은root키워드

다음을 사용하여 직접 배경색을 설정할 수 있습니다.sx소유물

<AppBar variant='elevated' sx={{backgroundColor:'#19857b'}}>

언급URL : https://stackoverflow.com/questions/39138380/how-to-apply-different-color-in-appbar-title-mui