MX is a more complete and functional set of components for desktop and browser applications, but they had inconsistent skinning rules. The Spark components are new for Flex 4 and are defined in the spark. The MX components shipped in previous releases of Flex and are defined in the MX. The main differences between Spark and MX components are how you use CSS styles with the components and how you skin them.
Spark and MX define some of the same components. For example, Spark defines a button control in the spark.components package, and MX defines a button control in the MX.controls package.
Spark and MX also define components that are unique. For example, Spark defines components to perform three dimensional effects. MX defines data visualization components, such as the DataGrid and AdvancedDataGrid controls, not included in Spark