Material UI Palette ไม่ได้อัปเดต

ฉันยังใหม่กับ React และ Material UI ฉันกำลังพยายามเพิ่มสไตล์ที่กำหนดเองให้กับปุ่ม MUI โดยใช้ createMuiTheme

ฉันได้ติดตามเอกสารและคัดลอกตัวอย่างไปเกือบหมดแล้ว แต่ไม่มีผลใด ๆ และไม่มีข้อผิดพลาดเกิดขึ้นในคอนโซล

ฉันต่อสู้กับสิ่งนี้มาระยะหนึ่งแล้ว และฉันไม่รู้ว่าปัญหาคืออะไร ฉันพลาดอะไรไป

import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const mytheme = createMuiTheme({
    palette: {
        primary: { main: '#1565C0'},
        secondary: { main: '#11cb5f' }, 
    },
});

export const PrimaryButton = (props) => {
    return (
        <ThemeProvider theme={mytheme}>
            <a href={props.buttonLink}>
                <Button
                    style={{ ...props.styles}}
                    onClick={props.handleClick}
                    variant='contained' color='primary' size='large'
                >
                    {props.buttonText}
                </Button>
            </a>
        </ThemeProvider>
    );
};

export const SecondaryButton = (props) => {
    return (
        <ThemeProvider theme={mytheme}>
            <Button
                style={{...props.styles }}
                value={props.value || ''}
                onClick={props.handleClick}
                variant='outlined' color='secondary' size='large'
            >
                {props.buttonText}
            </Button>
        </ThemeProvider>
    )
}

person Marts2390    schedule 17.12.2019    source แหล่งที่มา
comment
ใช้งานได้ดี ฉันลองแล้ว codesandbox.io/s/flamboyant-wu-b8kqg . ฉันเปลี่ยนสีหลักและใช้งานได้   -  person kooskoos    schedule 17.12.2019
comment
เฮ้ ขอบคุณสำหรับการตั้งค่า ฉันเห็นว่ามันทำงานอยู่ที่นั่น ปัญหาคือสไตล์เริ่มต้นยังคงถูกนำไปใช้และถูกนำไปใช้หลังจากสไตล์ที่กำหนดเองของฉัน ดังนั้นจึงต้องเขียนทับมัน ซึ่งฉันไม่แน่ใจว่าทำไมถึงเกิดขึ้น   -  person Marts2390    schedule 17.12.2019
comment
คุณมีคำเตือนในคอนโซลเกี่ยวกับ @material-ui/styles หลายอินสแตนซ์หรือไม่   -  person Ryan Cogswell    schedule 17.12.2019
comment
ไม่มีคำเตือนของคอนโซล คำตอบด้านล่างได้แก้ไขแล้ว ฉันจำเป็นต้องรวมแอปทั้งหมดใน ThemeProvider และจัดสไตล์ทั่วโลกแทนที่จะต่อส่วนประกอบ   -  person Marts2390    schedule 17.12.2019


คำตอบ (1)


มันกำลังทำงานอยู่ ลองเปลี่ยนสิ่งนี้:

variant='outlined'

by

variant='contained'
person Gaspar Teixeira    schedule 17.12.2019
comment
เสานั้นมีอยู่บน PrimaryButton ฉันเพิ่งตรวจสอบและมีการจัดเตรียมสไตล์ไว้ อย่างไรก็ตาม สไตล์เหล่านั้นถูกเขียนทับไปแล้ว แต่เป็นสไตล์ MUI - person Marts2390; 17.12.2019
comment
ดังนั้นฉันจึงไม่ได้ติดตามสิ่งที่คุณต้องการจริงๆ คุณต้องการเปลี่ยนค่าในแอปพลิเคชันทั้งหมดหรือไม่? หรือแค่ในองค์ประกอบ? - person Gaspar Teixeira; 17.12.2019
comment
ดังนั้นเมื่อฉันตรวจสอบเครื่องมือ dev ฉันจะเห็นว่าสไตล์ของฉันถูกนำไปใช้กับ › MuiButton-containedPrimary ไม่ว่าลำดับชั้นจะสูงขึ้นเท่าใด การตั้งค่า MUI เริ่มต้นจะถูกนำไปใช้และครอบงำสไตล์ของฉัน ฉันเดาว่าฉันต้องใช้มันกับแอปพลิเคชันทั้งหมดเพื่อแก้ไขปัญหานี้ - person Marts2390; 17.12.2019
comment
ใช่. ลองดูโค้ดแซนด์บ็อกซ์นี้แล้วแจ้งให้เราทราบหากช่วยคุณได้ codesandbox.io/s/agitated-galois-lcryu - person Gaspar Teixeira; 17.12.2019
comment
ยินดี. อย่าลืมเลือกคำตอบของคุณ ... ไม่งั้นคนอื่นจะพยายามตอบคุณ - person Gaspar Teixeira; 17.12.2019