Как изменить цвет текста по умолчанию с помощью grommet io?

Question

Какую переменную я должен установить в своей теме, чтобы изменить основной цвет шрифта? Примерно так:

const theme = deepMerge(base, {
  global: {
    font: {
      family: 'sans-serif',
    },
    color: '#eeeeee',
  },
});

или

const theme = deepMerge(base, {
  global: {
    font: {
      family: 'sans-serif',
      color: '#eeeeee',
    },
  },
});

Answer 1

Основной c цвет текста будет установлен на global.colors.text в вашем объекте customTheme следующим образом:

const customTheme = {
  global: {
    colors: {
      // all colors could be either a string or a dark and light object
      text: {
        dark: 'teal',
        light: 'purple',
      },
      // or simply as a string:
      // text: "#456789",
    },
  },
};

const Example = () => (
  <Grommet theme={customTheme}>
    <Box gap="medium" pad="small">
      <Text>
         Custom text color according to how it is defined on 
         global.colors.text
      </Text>
    </Box>
  </Grommet>
);

Для более обширных настроек цвета вы также можете определить свои собственные цвета на global.colors или заменить любой цвет, указанный в документации на втулку.

Answer 2

Я скоро начну использовать Grommet и исследую его.

Может быть, взгляните здесь, это может быть полезно: https://github.com/atanasster/grommet-nextjs/issues/1

<Button theme={{ global: { colors: { darkBackground: { text: 'red' } } } }} primary={true} label='Submit' onClick={() => {}} />