How to overwrite ElevatedButtonThemeData's foregroundColor in the widget

Question

I am looking for a way to change elevatedButton's foreground, and background color declared in main.dart.

What I tried to do is I want to receive foregroundcolor as an optional from the child widget, and if the child widget gives foregroundcolor, I would like to overwrite the foregroundcolor for only this widget.

main.dart

 elevatedButtonTheme: ElevatedButtonThemeData(
              style: ElevatedButton.styleFrom(
                foregroundColor: Colors.amber,
                backgroundColor: Colors.black,
              ),
            ),

widget.dart

class UniversalBottomElevatedButtonWidget extends StatelessWidget {
  Color? foregroundColor;
  UniversalBottomElevatedButtonWidget({
    Key? key,
    this.foregroundColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
      return SizedBox(
        width: double.infinity,
        height: 67,
        child: ElevatedButton(
            onPressed: (){},
            style: ElevatedButton.styleFrom(
                foregroundColor:
           // ㄴㄴ here I would like to use ternary operator or '??', if I received foregroundColor, showing that color, otherwise use foregroundColor declared in ElevatedButtonThemeData in main.dart
            child: const Text(
              "Change Password",
              style: TextStyle(
                  fontWeight: MbsSize.cardTitleFontWeight,
                  fontSize: MbsSize.cardTitleFontSize),
            )),
      );

  }
}

Thank you so much!

I tried to use .copyWith, but I am not familiar with this concept yet, so I failed.

Answer 1

Try this:

MaterialStateProperty.all(foregroundColor) ??
            Theme.of(context).elevatedButtonTheme.style?.foregroundColor